Vue之组件嵌套和组件通信

一、组件嵌套

1.声明子组件

//子组件
    let zi= {
        template:'#zi'
    }

2.声明父组件

//父组件
    let fu= {
        template:'#fu',
        //父组件嵌套子组件的时候，需要用components
        components: {
            zi
        }
    }

注意：谁被嵌套谁写到前面，比如父组件嵌套子组件，那么子组件要写到父组件前面去

3.声明new Vue

new Vue({
        el:'#app',
        //组件嵌套，父嵌套子，那么在页面渲染的时候，只需要父的组件就可以了
        components:{
            fu
        }
    })

4.html

---

二、组件通信之父组件传子组件

父组件传子组件的关键点在于props和v-bind实现

1.声明父组件

 //父组件
    let fu = {
        template:'#fu',
        components: {
            zi
        },
        //父传子的时候，需要在父组件创建data函数，传值
        data:function () {
            return {
                text:'我是父组件的数据'
            }
        }
    }

2.声明子组件

//子组件
    let zi = {
        template:'#zi',
        //用props来接收父组件传递过来的数据
        props:['text']
    }

3.声明vue实例

new Vue({
        el:'#app',
        components:{
            fu
        }
    })

 4.html

四、组件通信扩展

属性	描述
$children	获取所有的子组件
$refs	获取标签对象
$el	获取标签名
$data	获取组件的data属性
$root	获取根组件
$set	设置数组
$parent	获取父组件