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

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

自定义组件插槽

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

父子组件

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

<div id="app">
        <child1 ref="song1"></child1>
        <child2 ref="song2"></child2>
        <child3 ref="song3"></child3>
        <div>
            <h3>白胡子海贼团</h3>
            <p>{{song1.name}}</p>
            <p>{{song1.age}}</p>
        </div>
        <div>
            <h3>革命家</h3>
            <p>{{song2.name}}</p>
            <p>{{song2.age}}</p>
        </div>
        <div>
            <h3>草帽海贼团</h3>
            <p>{{song3.name}}</p>
            <p>{{song3.age}}</p>
        </div>
    </div>

Vue.component("child1", {
            template: `
            <div class="child">
                <h3>房产信息</h3>
                <p>{{$parent.house.address}}</p>
                <p>{{$parent.house.size}}</p>
                <childson></childson>
            </div>
            `,
            data() {
                return {
                    name: '艾斯',
                    age: 24
                }
            },
        })
Vue.component("child2", {
            template: `
            <div class="child">
                <h3>汽车信息</h3>
                <p>{{$parent.car.name}}</p>
                <p>{{$parent.car.color}}</p>
            </div>
            `,
            data() {
                return {
                    name: '萨博',
                    age: 22
                }
            },
        })
  Vue.component("child3", {
            template: `
            <div class="child">
                <h3>存款信息</h3>
                <p>{{$parent.money.value}}</p>
                <p>{{$parent.money.bank}}</p>
            </div>
            `,
            data() {
                return {
                    name: '路飞',
                    age: 20
                }
            },
        })

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

Vue.component("childson", {
            template: `
            <div class="child">
                <h3>房产信息</h3>
                <p>{{$parent.$parent.house.address}}</p>
                <p>{{$parent.$parent.house.size}}</p>
                <hr>
                <p>{{$root.house.address}}</p>
                <p>{{$root.house.size}}</p>
            </div>
            `
        })

父组件获取子组件的值，我们用$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 属性

<child1 ref="song1"></child1>

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