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>