vue是单向数据流
①props / $emit
父组件通过props的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。
②$children / $parent
this.$children[0].msg = “hello world” //父组件修改子组件data中的数据
this.$parent.mag //子组件拿到父组件data中的数据
c h i l d r e n 的 值 是 数 组 , children的值是数组, children的值是数组,parent的值是个对象
注意: p a r e n t , parent, parent,children它们的目的是作为访问数组的应急方法,更推荐用props和events实现父子组件通信。
③provide / inject
这是vue2.2.0新增的api,简单来说就是父组件中通过provide来提供变量,然后再子组件中通过inject来注入变量。
//父组件
export default{
name:“A”,
provide:{
for:"demo"
},
components:{
comB
}
}
//子组件
export default{
name:“B”,
inject:["for"],
data(){
demo:this.for
}
}
④ref / refs
ref:如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例,可通过实例直接调用组件的方法或访问数据。
//父组件
<component-a ref="comA"></component-a>
//子组件
export default{
data(){
return {
name:“Vue.js”
}
},
methods:{
sayHello(){
console.log("hello")
}
}
}
⑤eventBus(Bus总线):
//首先在src中创建一个Bus文件夹 => index.js
import Vue from “vue”;
export default new Vue({
})
//子组件1(发送数据的组件)
<button @click=“add()”>点击
import Bus from “@/Bus”
add(){
Bus.$emit(“add”,this.content);
}
//子组件2(接受数据的组件)
{{tit}}
import Bus from “@/Bus”;
created(){
Bus.$on(“add”,(data) => {
this.tit = data;
})
}
⑥Vuex;
⑦LocalStorage;
⑧$attrs / $listeners
将数据挂在到子组件的标签上去后,在子组件中使用this.$attrs直接获取到所有挂载的数据,返回的是一个对象。