当前位置 主页 > 服务器问题 > win服务器问题汇总 > 最大化 缩小

    Vuejs第十篇之vuejs父子组件通信

    栏目:win服务器问题汇总 时间:2019-11-10 10:05

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读。

    本篇资料来于官方文档:

    http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1

    父子组件通信

    ①访问子组件、父组件、根组件;

    this.$parent 访问父组件

    this.$children 访问子组件(是一个数组)

    this.$root 根实例的后代访问根实例

    示例代码:

    <div > 
    父组件: 
    <input v-model="val"><br/> 
    子组件: 
    <test :test="val"></test> 
    </div> 
    <script> 
    var vm = new Vue({ 
    el: '#app', 
    data: { 
    val: 1 
    }, 
    components: { 
    test: { 
    props: ['test'], 
    template: "<input @keyup='findParent' v-model='test'/>", 
    methods: { 
    findParent: function () { 
    console.log(this.$parent); //访问根组件 
    console.log(this.$parent.val); //访问根组件的val属性 
    console.log(this.$parent.$children.indexOf(this)); //查看当前能否在其父组件的子组件中找到索引 
    console.log(this.$parent === this.$root); //查看父组件和根组件是不是全等的(因为他的父组件就是根组件) 
    } 
    } 
    } 
    } 
    }); 
    </script>

    当在子组件的输入框按键弹起时,显示内容依次为:

    父组件、父组件的输入框的值(默认情况是1)、0(表示是父组件的children属性中的第一个元素)、true(由于父组件就是根组件,所以是全等的);

    通过这样的方法,可以在组件树中进行互动。

    ②自定义事件:

    首先,事件需要放置在events属性之中,而不是放置在methods属性中(新手很容易犯的错误),只能触发events属性中的事件,而methods属性中的事件是无法触发的。

    其次,向上派发和向下广播有所区别:向上派发会触发自身同名事件,而向下广播不会;

    第三,向上派发和向下广播默认只会触发直系(子或者父,不包括祖先和孙)的事件,除非事件返回值为true,才会继续在这一条线上继续。

    第四,事件不能显式的通过 this.事件名 来调用它。

    示例代码:

    <div > 
    父组件: 
    <button @click="parentClick">点击向下传播broadcast</button> 
    <br/> 
    子组件1: 
    <children1></children1> 
    <br/> 
    另一个子组件1: 
    <another-children1></another-children1> 
    </div> 
    <script> 
    var vm = new Vue({ 
    el: '#app', 
    data: { 
    val: 1 
    }, 
    methods: { 
    parentClick: function () { 
    this.$broadcast("parentClick", "abc"); 
    } 
    }, 
    events: { 
    childrenClick: function () { 
    console.log("childrenClick-Parent"); 
    }, 
    parentClick: function () { 
    console.log("parentClick-Parent"); 
    return true; 
    } 
    }, 
    components: { 
    children1: { //这个无返回值,不会继续派发 
    props: ['test'], 
    template: "<button>children1</button></br>子组件2:<children2></children2>", 
    events: { 
    childrenClick: function () { 
    console.log("childrenClick-children1"); 
    }, 
    parentClick: function (msg) { 
    console.log("parentClick-Children1"); 
    console.log("message:" + msg); 
    } 
    }, 
    components: { 
    children2: { 
    props: ['test'], 
    template: "<button @click='findParent'>children-Click</button>", 
    methods: { 
    findParent: function () { 
    this.$dispatch('childrenClick'); 
    } 
    }, 
    events: { 
    childrenClick: function () { 
    console.log("childrenClick-children2"); 
    }, 
    parentClick: function (msg) { 
    console.log("parentClick-Children2"); 
    console.log("message:" + msg); 
    } 
    } 
    } 
    } 
    }, 
    anotherChildren1: { //这个是返回值为true,会继续向子组件的子组件派发 
    props: ['test'], 
    template: "<button>anotherChildren1</button></br>另一个子组件2:<another-children2></another-children2>", 
    events: { 
    childrenClick: function () { 
    console.log("childrenClick-anotherChildren1"); 
    return true; 
    }, 
    parentClick: function (msg) { 
    console.log("parentClick-anotherChildren1"); 
    console.log("message:" + msg); 
    return true; 
    } 
    }, 
    components: { 
    anotherChildren2: { 
    props: ['test'], 
    template: "<button @click='findParent'>anotherChildren2-Click</button>", 
    methods: { 
    findParent: function () { 
    this.$dispatch('childrenClick'); 
    } 
    }, 
    events: { 
    childrenClick: function () { 
    console.log("childrenClick-anotherChildren2"); 
    }, 
    parentClick: function (msg) { 
    console.log("parentClick-anotherChildren2"); 
    console.log("message:" + msg); 
    } 
    } 
    } 
    } 
    } 
    
    } 
    }); 
    </script> 
    }, 
    parentClick: function () { 
    console.log("parentClick-anotherChildren2"); 
    } 
    } 
    } 
    } 
    } 
    
    } 
    }); 
    </script> 
    
    下一篇:没有了