Vue组件之间的传值
一、 父传子
定义一个子组件:
在div中放入组件占位符 在里面有冒号的是变量传递没有冒号的是常值传递
<!-- 父组件向子组件传值 -->
<menu-item :title='ptitle' content='hello' cc='147' :flag='true' :pobj='obj'></menu-item>
Vue.component('menu-item', {
props: ['title', 'content',
'cc', 'flag', 'pobj'
],
data: function() {
return {
msg: '子组件本身的数据'
}
},
template: '<div>{{msg + "----" + title + "-----" + content + cc+"----" + flag +"----" + pobj.age +"----" + pobj.name}}</div>'
});
对于这个子组件的父组件就是VM :
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
ptitle: '动态绑定属性',
obj: {
name: 'qy',
age: 18
},
fontSize: 10
},
methods: {
handle: function(data) {
// 扩大字体大小
this.fontSize += data;
}
}
});
在子组件中通过prop接收父组件传递过来的值,这样一来就可以实现父传子
二 、子传父
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
<div :style='{fontSize: fontSize + "px"}'>{{fontSize}}</div>
<!-- 在handle的参数不是data数据 是固定的$event参数获取子组件传递过来的值 -->
<!-- 子组件向父组件传值 -->
<hehe-item @change-text='handle($event)'></hehe-item>
</div>
我们在定义一个子组件实现子传父
// 子组件向父组件传值
// - 子组件用$emit()触发事件
// - $emit() 第一个参数为 自定义的事件名称
// - 第二个参数为需要传递的数据
// - 父组件用 v-on 监听子组件的事件
Vue.component('hehe-item', {
props: ['parr'],
// 自己定义一个触发事件
template: `
<div>
<button @click='$emit("change-text",5)'>扩大父组件中字体5大小</button>
<button @click='$emit("change-text",1)'>扩大父组件中字体1大小</button>
</div>
`,
});
在子组件通过 @click='$emit("父组件命名",传递的参数)'
方法传递参数
在父组件我们通过 @父组件命名='父组件自定义方法($event)'
接收子组件的传递的参数
$event 是接收到的传值参数
三 兄弟组件
div代码:
<div id="app">
<div>父组件</div>
<div>
<button @click='handle'>销毁事件</button>
</div>
<test-tom></test-tom>
<test-jerry></test-jerry>
</div>
第一: 提供事件中心
var hub = new Vue();
第二:定义2个同级别的组件
组件A:
Vue.component('test-tom', {
data: function() {
return {
num: 1
}
},
template: `
<div>
<div>TOM:{{num}}</div>
<div>
<button @click='handle'>点击加让jerry乘2</button>
</div>
</div>
`,
methods: {
handle: function() {
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 监听事件
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
组件B:
Vue.component('test-jerry', {
data: function() {
return {
num: 1
}
},
template: `
<div>
<div>MALI:{{num}}</div>
<div>
<button @click='handle'>点击加让tom加1</button>
</div>
</div>
`,
methods: {
handle: function() {
// 触发兄弟组件的事件
hub.$emit('tom-event', 3);
}
},
mounted: function() {
// 监听事件
hub.$on('jerry-event', (val) => {
this.num *= val;
});
}
});
第三 给每个组件添加 触发兄弟组件的事件 和 监听自己组件的事件
以上有参考
第四 给每个组件添加销毁事件 优化一下
var vm = new Vue({
el: '#app',
data: {
},
methods: {
// 点击过后就是销毁组件
handle: function() {
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
显示出来界面:
vue传值最常见的大概就是这样 当然我们也可以用Vuex 进行状态集中管理