Vue2组件传参

props/emit传参

使用介绍

props/emit 传参是最基础的组件通信方式，父组件通过props 可以向子组件进行通信，子组件通过emit 向父组件进行通信。

使用场景

父子传信

使用方法

父组件向子组件传参

//父组件
<template>
    < msg :word="word"></ msg>
  </template>
  <script>
  import Msg from './Msg.vue'

  export default {
    components: {
    msg
    },
    data() {
      return {
        word: '该睡觉啦'
      }
    }
  }
  </script>


//子组件
 <template>
    <div>
      <span>{{word}}</span>
    </div>
  </template>
  <script>
  export default {
    props: {
     word: {
        type: String,
        default: 'test'
      }
    }
  }
  </script>

子组件向父组件传参

Vue 通过* on/emit *的方式来实现子组件向父组件传参，在子组件中使用 $emit绑定一个自定义事件，当执行语句时，就会将参数传递给父组件；父组件通过$on 来监听子组件自定义的事件获取子组件传递的参数。

//父组件
<template>
    <msg :num="num" @add='add'></ msg>
  </template>
  <script>
  import Msg from './Msg.vue'

  export default {
    components: {
    	msg
    },
    data() {
      return {
        num:10
      }
    },
    methods:{
    	add(res){
    		this.num = res
    	}
    }
  }
  </script>


//子组件
 <template>
    <div>
      <button ></button>
    </div>
  </template>
  <script>
  export default {
    props: {
     num: {
        type: Number,
        default: 100
      }
    },
    methods:{
    	add(){
    		this.$emit('add',this.num + 1)
    	}
   	 }	
  }
  </script>

使用总结

最常见的父子组件通信方式
props支持参数验证
emit 只会触发父组件的监听事件
不适合多层次组件参数传递，需要逐层传递参数

$parent/ $children传参

引用父组件

引用子组件，使用$children 和 $refs

bus

使用方法

• 新建 bus.js
  在 utils 文件夹里新建bus.js
  
  -发送数据
  在要发送数据的组件中导入bus.js ,并使用bus.$emit

<template>
  <div id="app">
  </div>
</template>

<script>
import bus from "@/utils/bus";
export default {
  //App.vue 作为数据的提供方
  provide: {
    a: "明天要放假了", // 只要子孙元素都可以接收
  },
  name: "app",
  components: { TabsCom },
  data() {
    return {
      msg: "来自app",
    };
  },
  //在mounted 里面发送
  mounted() {
    setTimeout(() => {
      this.changeIt();
    }, 5000);
  },
  //在任意组件中都可以发送和接收
  methods: {
    changeIt() {
      this.msg = "下楼做核酸了 ";
      bus.$emit("msgchange", this.msg);
    },
  },
};
</script>

-接收数据
在有接收数据的组件中导入 bus.js ,并使用bus.$on(注意this)

<template>
  <div class="nav" :style="{ backgroundColor: bg_color, color: text_color }">
    <div class="left" @click="$emit('left-click', $event)">
      <slot name="icon_left"></slot> {{ left_text }}
    </div>
    <div class="title">
      <slot name="title"></slot>
      {{ title }}
    </div>
    <div class="right" @click="$emit('right-click', $event)">
      <slot name="icon_right"></slot> {{ right_text }}
    </div>
  </div>
</template>

<script>
import bus from "@/utils/bus";
export default {
  //接收的地方要监听数据，$event 就是app页面发送的数据
  created() {
    bus.$on("msgchange", ($event) => {
      console.log("msgchange");
      this.myMsg = $event;
    });
  },

  data() {
    return {
      myColor: "#f30",
      myMsg: "",
    };
  },
  props: {
    text_color: {
      type: String,
      default: "#000",
    },
    bg_color: {
      type: String,
      default: "#fff",
    },
    title: {
      type: String,
      default: "",
    },
    left_text: {
      type: String,
      default: "返回",
    },
    right_text: {
      type: String,
      default: "",
    },
  },
};
</script>

使用总结

常用于多层嵌套组件场景下兄弟组件或任意两个组件之间通讯。
$on 事件 是不会自动清除销毁的，需要手动销毁，可以在beforeDestroy中解绑监听，避免重复触发。
适合简单场景下使用，太过复杂的场景建议使用 vuex。

provide/inject传参

使用介绍

• 常用于多层嵌套组件封装，当后代组件需要用到顶层组件的数据方法时可以使用这个。
• provide 提供数据，所有子孙都可以通过 inject注入数据，inject 接收父辈组件提供的数据。
• provide 和inject 依赖注入 ，跨层级访问（只读）

• 使用方法

• 

使用总结

1.跨层级组件之间通信
2.传递的属性是非响应的
3.如果需要传递响应属性，采用函数的方式传入对象
4.复杂组件不建议使用此方式传参，任意层级都能访问导致数据追踪比较困难