Vue组件常用的六种通信方式

Vue.js 组件实例的作用域是相互独立的,不同组件之间的数据不能互相访问,组件有父级组件、子级组件、兄弟组件,如何选择组件之间的通信方式?针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解,对比各自的区别以及使用场景。

1. props

子组件使用props 接收父组件传递的值,子组件通过 $emit ,让父组件接收事件,改变父组件的data里面的值;

代码示例:

  1. <!--父组件-->
    <template>
        <title :title='title' @change='changeHandle'></title>
    </template>
    <script>
    export default {
        data() {
            return {
                title: '123'
            };
        },
        components: {
            title
        },
        methods: {
            changeHandle(val) {
                this.title = val;
            }
        }
    }
    </script>
    
    <!--子组件-->
    <template>
        <div @click='changeHandle'>{
        {title}}</div>
    </template>
    <script>
    export default {
        props: {
            title: String
        },
        methods: {
            changeHandle() {
                this.$emit('change', '456');
            }
        }
    }
    </script>

     

子组件通过事件向父组件传递值,父组件更改自己的数据,子组件接收更改后的值;

2. $emit/$on

通过Vue 的实例触发事件和监听事件,实现了跨级组件的通信;

代码示例:

  1. <!--在Vue的原型链上添加$bus 属性,赋值为Vue实例-->
    const EventBus = new Vue();
    Object.defineProperties(Vue.prototype, {
        $bus: {
            get() {
                return EventBus;
            }
        }
    });
    window.globalVue = EventBus;
    
    <!--使用-->
    // 组件A
    <template>
        <div @click='changeHandle'>触发事件</div>
    </template>
    <script>
    export default {
        methods: {
            changeHandle() {
                window.globalVue.$emit('change', '456');
            }
        }
    }
    </script>
    
    // 组件 B
    <template>
        <div>监听事件</div>
    </template>
    <script>
    export default 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue是一种流行的JavaScript框架,它允许您轻松地构建可重用的组件Vue组件是一个独立的功能部件,它可以通过不同的方式进行通信,以实现更好的交互和协作。以下是Vue中六种常用组件通信方式: 1. Props Props是一种用于从父组件向子组件传递数据的机制。父组件可以将数据作为属性传递给子组件,并且子组件可以通过props属性来使用这些数据。 2. Events Events是一种Vue组件通信的双向机制,它允许子组件通过触发事件来向父组件发送消息。父组件可以监听这些事件,并根据需要作出响应。 3. Provide / Inject Provide / Inject是一种用于跨深度嵌套组件之间共享数据的机制。父组件可以通过provide属性将数据传递给子组件,然后子组件可以通过inject属性来访问这些数据。 4. Vuex Vuex是一种Vue状态管理器,它允许您在单个应用程序中管理共享状态。Vuex包含一个中央状态存储库,可以跨组件访问和修改状态,以实现更好的协作和交互。 5. ref 属性 Ref是一种用于访问组件实例的方法,它可以通过设置ref属性来指定组件的名称。然后你就可以通过$refs属性来访问该组件实例,并在组件之间进行通信。 6. $emit 和 $on $emit和$on是Vue的内置事件机制,它允许组件之间进行通信。$emit用于触发事件,而$on则用于监听事件。使用这种方式,您可以轻松地在组件之间传递消息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值