前言

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。

组件

组件与组件之间,还存在着不同的关系。父子关系与兄弟关系(不是父子的都暂称为兄弟吧)。

原文作者:林鑫,作者博客:https://github.com/lin-xin/blog

父子组件

父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件。

// 注册一个子组件Vue.component('child', {
    data: function(){
        text: '我是father的子组件!'
    }
    template: '<span>{{ text }}</span>'})// 注册一个父组件Vue.component('father', {
    template: '<div><child></child></div>'  // 在模板中使用了child组件})

直接使用 father 组件的时候:

        		

网友评论