Vue 组件间进行通信

Posted 2020-12-17 langkyesir

一、父组件与子组件通信

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

• html部分

<div id="app">
    <!-- 父组件将fruit传递给 f -->
    <component-a v-bind:f=‘fruit‘></component-a>
</div>

• javascript部分

<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>