- 父组件改变子组件的值
<!--在父组件中引用子组件,添加ref标识-->
<son ref="son"></son>
//父组件点击事件
clickFunc(){
//若更新子组件里a的值
this.$refs.son.a = 'xx';
//若调用子组件里b方法
this.$refs.son.b();
}
- 父组件向子组件传值:props
<!--父组件中引用子组件-->
<son :sonVal="parentVal"></son>
<!--子组件-->
props: {
sonVal: {
type: String,
default: 'lin'
}
}
- 子组件向父组件传值
<!--父组件中引用子组件-->
<son :sonVal="parentVal" @changeVal="changeParentVal"></son>
<!--子组件的点击事件-->
sonClick(val) {
this.$emit('changeParentVal', val)
}
- 平级传值:bus
方法一:挂载到vue.prototype上
<!--main.js-->
Vue.prototype.bus = new Vue();
<!--要传值的组件-->
<button @click="changeName">编辑姓名</button>
changeAge(name) {
this.$bus.$emit('editName', name)
}
<!--接收值的组件-->
created() {
this.$bus.on('editName', (name) => {
console.log(name); // 就能接收到值啦
})
}
方法二:挂载到vue根实例root上
<!--main.js-->
const bus = new Vue();
var vue = new Vue({
router,
store,
i18n,
data: {
bus
},
render: h => h(App)
}).$mount('#app')
export default vue
<!--要传值的组件-->
<button @click="changeName">编辑姓名</button>
changeAge(name) {
this.$root.bus.$emit('editName', name)
}
<!--接收值的组件-->
created() {
this.$root.bus.on('editName', (name) => {
console.log(name); // 就能接收到值啦
})
}
方法三:创建一个bus的模块
<!--bus模块-->
import Vue from 'vue';
export default new Vue(); // 暴露一个vue实例
<!--要传值的组件-->
import bus from '@/bus';
<button @click="changeAge">编辑年龄</button>
changeAge(age) {
bus.$emit('editName', name)
}
<!--接收值的组件-->
created() {
bus.on('editName', (name) => {
console.log(name); // 就能接收到值啦
})
}