vue中组件通信之子父通信

子父通信:从子组件向上传递数据。

<div id="app">
    <parent-comp1></parent-comp1>
    <parent-comp1></parent-comp1>
</div>
Vue.component('child-comp1', {
    template: `
        <button @click="send">发送</button>
    `,
    data(){
        return {
            child_comp1: 'hello world!'
        }
    },
    methods: {
        send(){
            this.$emit('child_comp1_send', this.child_comp1);
        }
    }
});

Vue.component('parent-comp1', {
    template: `
        <div>
            <child-comp1 @child_comp1_send="get"></child-comp1>
            <p>{{parent_comp1}}</p>
        </div>
    `,
    data(){
        return {
            parent_comp1: ''
        }
    },
    methods: {
        get(data){
            this.parent_comp1 = data;
        }
    }
});

new Vue({
    el: '#app'
})

另一种方式:

有的时候用一个事件来抛出一个特定的值是非常有用的。这时可以使用 $emit 的第二个参数来提供这个值,然后当在父级组件监听这个事件的时候,我们可以通过 $event 访问到被抛出的这个值:

<div id="app">
    <div id="blog-posts-events-demo">
        <div :style="{fontSize: postFontSize+'em'}">
            <my-component @enlarge-text="postFontSize+=$event"></my-component>
            <p>Sometimes this is desirable for readability.</p>
        </div>
    </div>
</div>
Vue.component('my-component', {
    template: `<button @click="$emit('enlarge-text', 0.2)">Enlarge text</button>`
});

let vm = new Vue({
    el: '#app',
    data: {
        postFontSize: 1
    }
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值