vue 组件通信

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

新老客户大回馈,云服务器低至5折

组件

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

父组件向子组件通信

是通过子组件定义的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>

 


原文链接:https://www.cnblogs.com/whnba/p/10513434.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:elementUI vue upload完整示例

下一篇:Vue.js01:跑马灯效果