子组件传递数据给父组件
<body>
<div id="box">
<parent></parent>
</div>
<template id='p'>
<div>
<h1>父组件~~~~~~{{ a }}</h1>
<child1 :val='a' @change='getVal'></child1>
</div>
</template>
<template id='c1'>
<div>
<h3>child1------{{ b }}~~~~{{ val }}<button @click='fn'>变</button></h3>
</div>
</template>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data: {},
components: {
parent: {
template: '#p',
data: function () {
// body...
return {
a: '爸爸'
}
},
methods: {
getVal: function (msg) {
// body...
// console.log(msg);
this.a = msg;
}
},
// 逆向传值,vue中不允许,需要我们主动触发
components: {
child1: {
template: '#c1',
data: function () {
// body...
return {
b: '儿子'
}
},
props: ['val'], //希望得到的值
// 正向传值 vue是允许的
methods: {
fn: function () {
// body...
// console.log(1);
// 触发监听 $emit('自定义事件名称',值)
// 谁触发,谁接受
this.$emit('change', this.b);
}
}
}
}
}
}
});
</script>
兄弟组件间通信
<body>
<div id="box">
<child1></child1>
<child2></child2>
</div>
<template id='c1'>
<div>
<h1>child1-->{{ msg }}<button @click='fn'>传值</button></h1>
</div>
</template>
<template id='c2'>
<div>
<h3>child2-->{{ msg2 }}</h3>
</div>
</template>
</body>
</html>
<script type="text/javascript">
/*
同级组件间传值:
需要通过建立中转站(新的vue实例)来传值
同级间传值,需要主动触发
接收监听 实例上的$on方法来接收监听
*/
var Hub = new Vue(); // 1) 中转站,其中不需要设置任何参数
var vm = new Vue({
el:'#box',
data: {},
components: {
child1: {
template: '#c1',
data: function () {
return {
msg: '我是哥哥'
}
},
methods: {
fn: function () {
// 2) 主动触发监听(中转站触发监听)
Hub.$emit('change',this.msg);
}
}
},
child2: {
template: '#c2',
data: function () {
// body...
return {
msg2: '我是弟弟'
}
},
// 创建完成
created(){
// 3) 接收监听 $on('事件名称',function(val){}) val是传递过来的值
Hub.$on('change', function (val) {
console.log(val);
// this.msg2 = val;
});
}
}
}
});