vue 自定义组件之父子组件

1st.什么是父子组件

    html标签中使用的组件在使用插槽后互相之间可以嵌套，被嵌套的称为嵌套的子组件，嵌套的叫父组件，所有的组件都有一个根组件即vue实例管理的容器。

2nd.获取父组件实例

    使用$parent获取父组件的实例。

 Vue.config.productionTip = false

        Vue.component("son", {

            template:`

                

                 11     {{$parent.name}}

                

            `,

            mounted() {

                console.log(this.$parent);

            },

        })

        new Vue({

            el:'#app',

            data:{

                name:"张三"

            },

        })

可以在控制台看到父组件的vue实例

父组件的vue实例

3rd.获取根组件

    当组件嵌套比较深，而又需要最外层组件的数据时，可以通过$parent.$parent......$parent一层一层父类往上至根目录，

或者使用 $root 直接获取根组件

4rd.获取所有子组件实例

    使用$children获取所有子组件实例。

        Vue.config.productionTip = false

        Vue.component("son1", {

            template:`

                

11

            `,

        })

        Vue.component("son2", {

            template:`

                

22

            `,

        })

        new Vue({

            el:'#app',

            data:{

            },

            mounted() {

                console.log(this.$children);

            },

        })

可在控制台看见根据组件在页面中的顺序返回的所有子组件组成的数组

子组件数组

要使用子组件的值时可使用此方法，用下标选择需要的子组件。

5rd.使用标识 ref 获取子组件实例

因为使用$children获取的数组里顺序是按是在页面中使用的顺序来排序的，当有的业务不确定使用顺序，并且还要使用子组件的值的时候，就需要按ref标识来获取子组件。

在使用子自定义组件时，给组件标签添加一个ref属性，然后就可以通过$refs返回拥有ref属性的组件：

//html

    

        

        

        

    

//vue 

        Vue.config.productionTip = false

        Vue.component("son1", {

            template:`

                

11

            `,

        })

        Vue.component("son2", {

            template:`

                

22

            `,

        })

        Vue.component("son3", {

            template:`

                

33

            `,

        })

        new Vue({

            el:'#app',

            data:{

            },

            mounted() {

                console.log(this.$refs);

            },

        })

在控制台可以看见获取到的子组件数组：

$refs返回的数组

    因为返回的是对象，所以可以通过ref值来操作子组件的值。