vue 自定义组件(二) $parent、$children、ref、refs

第三方组件官网
Element-ui
iView
Vant
如果父类组件需要直接获取子类的方法 可以使用$children
子获父 $parent 子获取跟组件$root

自定义组件插槽

如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示

父子组件

我们先定义3个全局的自定义组件 分别为child1 child2 child3
我们把vue实例当作根组件（父组件）
父跟子的关系
通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用$parent来获取父组件的的值

        
        
        
        

            
白胡子海贼团
            
{{song1.name}}
            
{{song1.age}}
        
        

            
革命家
            
{{song2.name}}
            
{{song2.age}}
        
        

            
草帽海贼团
            
{{song3.name}}
            
{{song3.age}}
        
    

Vue.component("child1", {
            template: `
            

                
房产信息
                
{{$parent.house.address}}
                
{{$parent.house.size}}
                
            
            `,
            data() {
                return {
                    name: '艾斯',
                    age: 24
                }
            },
        })
Vue.component("child2", {
            template: `
            

                
汽车信息
                
{{$parent.car.name}}
                
{{$parent.car.color}}
            
            `,
            data() {
                return {
                    name: '萨博',
                    age: 22
                }
            },
        })
  Vue.component("child3", {
            template: `
            

                
存款信息
                
{{$parent.money.value}}
                
{{$parent.money.bank}}
            
            `,
            data() {
                return {
                    name: '路飞',
                    age: 20
                }
            },
        })

我们在child1子组件中插入了一个组件这个时候child1 变成了childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个$parent来获取祖组件数据，当然，我们可以用$root直接获取根实例的值

Vue.component("childson", {
            template: `
            

                
房产信息
                
{{$parent.$parent.house.address}}
                
{{$parent.$parent.house.size}}
                

                
{{$root.house.address}}
                
{{$root.house.size}}
            
            `
        })

父组件获取子组件的值，我们用$children来获取，
$children获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件
如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：
如下：

new Vue({
            el: '#app',
            data() {
                return {
                    house: {
                        address: '汤臣一品二栋1104',
                        size: '150平米'
                    },
                    car: {
                        name: '奥迪RS8',
                        color: '黑色'
                    },
                    money: {
                        value: '120万',
                        bank: '中国银行'
                    },
                    song1: {
                        name: '',
                        age: 0
                    },
                    song2: {
                        name: '',
                        age: 0
                    },
                    song3: {
                        name: '',
                        age: 0
                    },
                }
            },
            mounted() {
                // $children 返回的是对象数组   
                 this.song1.name=this.$children[0].name
                 this.song1.age=this.$children[0].age
                 this.song2.name=this.$children[1].name
                 this.song2.age=this.$children[1].age
                 this.song3.name=this.$children[2].name
                 this.song3.age=this.$children[2].age
    ---------------------------------------------------------------------------
                // $refs 返回的是对象
                this.song1.name = this.$refs.song1.name
                this.song1.age = this.$refs.song1.age
                this.song2.name = this.$refs.song2.name
                this.song2.age = this.$refs.song2.age
                this.song3.name = this.$refs.song3.name
                this.song3.age = this.$refs.song3.age
            },
        })

通常情况下，页面的结构是可能随时调整的，这个时候我们使用$children 来获取子组件的数据，数据可能是不准确的，这个时候 我们就会在子组件的行类添加ref 属性

ref绑定的就是名称
这个时候我们用$refs. 来获取子组件的值，这个时候返回的是一个对象，对象的值是一 一对应的，这样就不怕页面调整，也不会出现数据的错误