Vue 组件间进行通信

Posted langkyesir

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 组件间进行通信相关的知识,希望对你有一定的参考价值。

一、父组件与子组件通信

父组件与子组件通信段桥梁是子组建的props属性,通过属性绑定的方式,将父组件的数据传到子组件的props中,子组件在内部使用这些数据。

<div id="app">
    <!-- 父组件将fruit传递给 f -->
    <component-a v-bind:f=‘fruit‘></component-a>
</div>
<script>
    // 子组件a
    Vue.component(‘component-a‘, {
        props: [‘f‘],

        <!-- 在子组件中使用父组件传递给f的数据 -->
        template: `
            <ol>
                <li v-for=‘(item,index) in f‘ v-bind:key=‘index‘ v-text="item"></li>
            </ol>`,
    });
    // 根组件
    let vm = new Vue({
        el: "#app",
        data: {
            fruit: [‘Apple‘, ‘orange‘, ‘banana‘],
        },
    });
</script>

二、子组件与父组件通信

可能你已经注意到,通过props是可以修改父组件的数据,但是Vue并不推荐这种方式进行子组件向父组件通信的数据交互,可能会造成数据的混乱。props是一个单项数据流

Vue建议通过自定义事件的方式来先父组件传递信息,通过固定语法$emit(‘self-event‘,argument)自定义事件,通过$event获取参数argument

  • HTML部分
<div id="app">
    <span v-bind:style="{fontSize:fs + ‘px‘}" v-cloak>父组件字体字号:{{fs}}</span>
    <!-- 父组件监听自定义事件add-fontsize,触发父组件中定义的handle方法,$event为子组件传递的参数 -->
    <component-a v-on:add-fontsize="handle($event)"></component-a>
</div>
  • JavaScript部分
<script>
    // 子组件a
    Vue.component(‘component-a‘, {
        props: [‘f‘],
        <!-- 自定义add-fontsize事件,参数 5 -->
        template: `<button v-on:click="$emit(‘add-fontsize‘,5)">增加父组件字体字号</button>`,
    });
    // 根组件
    let vm = new Vue({
        el: "#app",
        data: {
            fs:12,
        },
        methods:{
            // 自定义事件add-fontsize所触发点方法
            handle:function (value) {
                this.fs += value;
            }
        }
    });
</script>

三、非父子组件间的通信

兄弟组件借助一个Vue实例充当事件中心,进行事件管理,从而实现彼此的通信。

  • HTML部分
<div id="app">
    <button v-on:click="destroyEvent">注销事件</button>
    <component-a></component-a>
    <component-b></component-b>
</div>
  • JavaScript部分
<script>
    // 事件中心
    let eventHub = new Vue();
    // 子组件a
    Vue.component(‘component-a‘, {
        data: function(){
            return {
                sugar:0,
            }
        },
        template: `<div>
                <span v-cloak>A 我有:{{sugar}}颗糖</span>
            <button v-on:click="handle">给b两颗糖</button>
        </div>`,
        methods: {
            handle: function () {
                // 点击按钮,触发事件event-a,并传递一个参数
                eventHub.$emit(‘event-a‘,2);
            }
        },
        mounted: function () {
            // 监听b组件的事件event-b,并在触发时执行一个箭头函数修改数据
            eventHub.$on(‘event-b‘,(value) => {
                this.sugar += value;
            })
        }
    });
    // 子组件b
    Vue.component(‘component-b‘,{
        data: function(){
          return {
              sugar:0,
          }
        },
        template: `<div>
            <span v-cloak>B 我有:{{sugar}}颗糖</span>
            <button v-on:click="handle">给a五颗糖</button>
        </div>`,
        methods: {
            handle: function () {
                // 点击触发事件event-b,并在触发时执行一个箭头函数修改数据
                eventHub.$emit(‘event-b‘,5);
            }
        },
        mounted: function () {
            // 监听事件,event-a
            eventHub.$on(‘event-a‘,(value) => {
                this.sugar += value;
            });
        }
    })
    // 根组件
    let vm = new Vue({
        el: "#app",
        data: {
        },
        methods:{
            // 点击按钮,注销事件
            destroyEvent: function () {
                eventHub.$off(‘event-a‘);
                eventHub.$off(‘event-b‘);
            }
        },
    });
</script>

以上是关于Vue 组件间进行通信的主要内容,如果未能解决你的问题,请参考以下文章

vue组件间的通信之pubsub-js

Vue 非父子组件通信方案

vue组件间的通信方式

Vue组件间通信

Vue组件间通信

Vue组件间通信