zoukankan      html  css  js  c++  java
  • Vue 组件间进行通信

    一、父组件与子组件通信

    父组件与子组件通信段桥梁是子组建的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>
    
  • 相关阅读:
    DGA域名可以是色情网站域名
    使用cloudflare加速你的网站隐藏你的网站IP
    167. Two Sum II
    leetcode 563. Binary Tree Tilt
    python 多线程
    leetcode 404. Sum of Left Leaves
    leetcode 100. Same Tree
    leetcode 383. Ransom Note
    leetcode 122. Best Time to Buy and Sell Stock II
    天津Uber优步司机奖励政策(12月28日到12月29日)
  • 原文地址:https://www.cnblogs.com/langkyeSir/p/13280881.html
Copyright © 2011-2022 走看看