首页 > > 网页制作 > Javascript >

vue 组件通信

2019-03-12 08:23:44来源：博客园阅读 ()

组件

组件之间的数据是单向绑定的。

父组件向子组件通信

是通过子组件定义的props属性来实现。通过props定义变量与变量类型和验证方式。

props简化定义

在简化定义中，变量是以数组的方式定义。

Vue.component("test",{
       template:'....',
       props:["变量1","变量2",...]
})

props完整定义

完整定义是采用字面量形式，type 要定义的类型

Vue.component("test",{
    template:'....',
    props:{
        name:String,  // 变量：类型,
        name1:[String,Number] // 多类型：表示可为字符串或数值类型
        name2:{
            type:Array,   // 数组或对象类型 要设置一个默认值。
            default(){
                return [];
            }
        },
        name3:{
            type:String,
            required:true,   // 必传
        }
        name3:{
            type:String,   
            validator(value){
                //...  自定义数据验证方式。
            }
        }
    }
})

通信方式

父组件向子组件定义的变量绑定值。

    <p>父组件向子组件传递数据count数据，采用v-bind进行数据绑定了，当父组件值变动时子组件也会变。</p>
    <div class="app">
        <input v-model="count">
        <my-component :number="count"></my-component>
    </div>
    <script>
        // 定义子组件
        Vue.component("my-component", {
            props:["number"],
            template:`<span>动态接收：{{number}}</span>`,
        });
        new Vue({
            el: ".app",
            data: {
                count: 0
            }
        });
    </script>

子组件向父组件通信

子组件向父组件通信采用的是自定义事件。$emit与$on。

    <p>子组件向父组件通信采用的是自定义事件。$emit与$on。</p>
    <div class="app">
        {{count}}
        <!-- 相当于设置接收对象 -->
        <my-component @add="getcount"></my-component>
    </div>
    <script>
        // 定义子组件
        Vue.component("my-component", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="test">+1</button>`,
            methods: {
                test() {
                    this.$emit('add', ++this.count);   // 当监听事件被触发后，向接收对象传递信息，告诉它变化量。
                }
            }

        });
        new Vue({
            el: ".app",
            data: {
                count: 0
            },
            methods:{
                getcount(value){
                    this.count = value;
                }
            }
        });
    </script>

同级组件通信（任意级别组件通信）

采用中央事件总线（bus）来实现。就是创建一个空的vue对象，在要接收数据的组件里面设置$on事件，在要监听的组件里面设置$emit.

    <p>同级组件，组件1向组件2传递数据。</p>
    <p>当组件+1事件触发后，向组件2传递结果。</p>
    <div class="app">
        <my-component-1></my-component-1>
        <my-component-2></my-component-2>
    </div>
    <script>
        let bus = new Vue();

        // 定义子组件
        Vue.component("my-component-1", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<button @click="test">+1</button>`,
            methods: {
                test() {
                    bus.$emit('on-add', ++this.count);
                }
            }

        });

        // 定义子组件
        Vue.component("my-component-2", {
            data() {
                return {
                    count: 0
                }
            },
            template: `<span>{{count}}</span>`,
            mounted() {
                bus.$on("on-add", (vlaue) => {
                    this.count = vlaue
                })
            }
        });
        new Vue({
            el: ".app"
        });
    </script>