第三方组件官网
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. 来获取子组件的值，这个时候返回的是一个对象，对象的值是一 一对应的，这样就不怕页面调整，也不会出现数据的错误
网友评论