vue組件中各種傳值的方法

一、直接使用屬性傳遞的方式傳遞

父組件中傳遞的參數可以有很多個,如果子組件中未使用props接收的話,會逐級的往下面傳遞並且會掛載在當時組件的dom上,見下圖

• 1、父組件給兒子組件傳遞參數

  <template>
    <Son2
      :name="'哈哈'"
      :age="20"
      :bookList="['三國演義', '西遊記']"
      :details="{'name': '張三', address: '廣東深圳'}"
      :isActive="false"
    ></Son2>
  </template>
  

• 2、在兒子組件中不接收

  <template>
    <div>
      <p>son2組建: {{$attrs}}</p>
    </div>
  </template>
  <script>
    export default {
      // inheritAttrs: false, 如果不想要在dom上顯示傳遞過來的屬性,就加上這個
    };
  </script>
  

• 3、需要將剩餘參數(當前組件未接收完的,全部傳遞到下一個子組件中)

  <Grandson2 v-bind="$attrs" />
  

二、使用v-on="$listeners"進行跨組件傳遞事件

• 1、父組件中

  <template>
    <div>
      <p>父組件</p>
      <Son2
        :name="'哈哈'"
        :age="20"
        :bookList="['三國演義', '西遊記']"
        :details="{'name': '張三', address: '廣東深圳'}"
        :isActive="false"
        @change="change"
      ></Son2>
    </div>
  </template>
  
  <script>
    import Son2 from './Son2';
    export default {
      name: 'parent2',
      methods: {
        change() {
          console.log('我被點擊了');
        },
      },
      components: {
        Son2,
      },
    };
  </script>
  
  <style scoped></style>
  

• 2、子組件中繼續傳遞下去

  <Grandson2 v-bind="$attrs" v-on="$listeners" />
  

• 3、在孫組件中調用

  export default {
    mounted() {
      console.log(this);
      this.$listeners.change();
    },
  };
  

三、使用生產者與消費者的方式進行跨組件傳遞參數

• 1、父組件中

  export default {
    name: 'parent2',
    provide() {
      return {
        parent: {
          name: '哈哈',
          age: 20,
          gender: '男',
        },
      };
    },
  };
  

• 2、在需要取值的組件中

  export default {
    inject: ['parent'],
    mounted() {
      console.log(this.parent);
    },
  };
  

四、使用Bus

vue中的bus事件,一般作爲中央事件總線來使用, 使用場景

• 1、小型項目(大項目直接使用vuex)

• 2、兩個沒關聯關係的組件(有關聯關係的也可以使用,但是一般會不會這樣使用)

  A、B 組件是兩個相互沒關聯的組件,A 組件要去調用 B 組件中的一個方法

使用方式

• 1、在main.js中直接掛載到原型上

  // 直接掛載到原型上
  Vue.prototype.$bus = new Vue();
  

• 2、組件 A 中使用$emit發送一個事件

  <template>
    <div>
      <p>我是孫組件</p>
      <button @click="bus">bus事件</button>
    </div>
  </template>
  
  <script>
    export default {
      methods: {
        bus() {
          this.$bus.$emit('busEvent');
        },
      },
    };
  </script>
  

• 3、在 B 組件中使用$on接受發送出來的事件

  export default {
    methods: {
      print () {
        console.log('我是bus事件調用的打印的方法');
      }
    },
    mounted () {
      this.$bus.$on('busEvent', this.print);
    },
  }
  </script>