1,$emit和props (父子组件间传参,且嵌套层级少)
现有parent组件和child组件
1.1 父组件向子组件传值
Vue.component('Child', {
props: ["message"],
data() {
return {}
},
template: "
<div></div>
",
}
mounted() {
console.log(this.message); // 父组件的数据
}
})
Vue.component('Parent', {
data() {
return {
msg: '父组件的数据'
}
},
template: "
<div>
<Child :message='msg' />
</div>
"
})
1.2 子组件向父组件传值
Vue.component('Child', {
data() {
return {
childData: "子组件数据"
}
},
template: "
<div>
<button @click="sendMsgToParent">按钮</button>
</div>
",
methods: {
sendMsgToParent() {
this.$emit("sendMsg", this.childData)
}
})
Vue.component('Parent', {
data() {
return {}
},
template: "
<div>
<Child @sendMsg="getData" />
</div>
",
methods: {
getData(val) {
console.log(val); // 子组件数据
}
}
})
2 listeners(从vue2.4开始.解决多层嵌套,且不用多次命名)
Vue.component('D', {
data() {
return {
msg: 'd的数据'
}
},
template: "
<div>
<button @click="sendData">{{$attrs.dataA}}</button>
</div>
",
methods: {
sendData() {
this.$emit("showDData", this.msg)
}
}
})
Vue.component('C', {
data() {
return {}
},
template: "
<div>
<D v-bind="$attrs" v-on="$listeners" />
</div>
",
})
Vue.component('B', {
data() {
return {}
},
props: ['dataA']
template: "
<div>
<C v-bind="$attrs" v-on="$listeners" />
</div>
",
})
Vue.component('A', {
data() {
return {
msg: 'A的数据'
}
},
template: "
<div>
<B :dataA="msg" v-on:showDData="getDData" />
</div>
",
methods: {
getDData(val) {
console.log(val) // d的数据
}
}
})
//总结一下, 第二种方式传递参数,第一步和第一种方式相同,剩下的中间组件就绑定固定的形式的属性或者方法就可以.
3,vue的bus对象(中央事件主线,用于解决兄弟组件间相互通信)
var bus = new Vue();
Vue.component('A1', {
data() {
return: {
dataA1: 'A1的数据'
}
},
template: "
<div @click='sendToA2'>点击传递</div>
",
methods: {
sendToA2() {
bus.$emit('globalEvent', this.dataA1) // 注: 一定是bus.
}
}
})
Vue.component('A2', {
data() {
return: {}
},
mounted() {
bus.$on('globalEvent', (val)=> { // 注: 一定是bus.
console.log(val); // A1的数据
})
}
})
Vue.component('A', {
data() {},
template: "
<div>
<A1 />
<A2 />
</div>
"
})
4, provide(父组件提供变量)和inject(子组件接收变量)
Vue.component('A1', {
data() {
return: {}
},
inject: ['parentData'],
mounted() {
console.log(this.parentData); // 父组件数据
}
template: "<div>2333</div>"
})
Vue.component('A2', {
data() {
return: {}
},
template: "
<div>
<A1 />
</div>
"
mounted() {
}
})
Vue.component('A', {
data() {},
provide: {
parentData: '父组件数据'
}
template: "
<div>
<A2 />
</div>
"
})
5,children
Vue.component('A1', {
data() {},
props: {
value: string
}
template: "
<div>
<button @click="getAData">子组件按钮</button>
</div>
",
methods: {
getAData() {
console.log(this.msg) // HELLO
this.$parent.myMsg = "1234567"; // 这样的话会改变父组件中myMsg的值
}
}
})
Vue.component('A', {
data() {},
template: "
<div>
<A1 />
<button @click='chanageA1Value'>父组件按钮</button>
</div>
",
methods: {
chanageA1Value() {
this.$children[0].msg = "HELLO"
}
}
})
其实还有一种是vuex....
网友评论