$children：获取所有子组件，某个加索引，一般不这么使用应为添加删除子组件索引会变
$refs：给子组件取名 声明 ref="name"，通过this.$refs.name 获取到子组件
我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<template id="son">
<!--注意templa里只能包含一个根元素 或用v-if-->
<div>
<ul>
<li v-for="movie in cmovies">{{ movie }}</li>
</ul>
<p>{{ cmessage }}</p>
</div>
</template>
<div id="app">
<!--2.将父数据赋值给子数据，从右到左-->
<son :cmovies="movies" :cmessage="message" ref="son"></son>
<button @click="btnClick" >获取子组件属性</button>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const son = {
template: '#son',
data() {
return {
message: '我是son'
}
},
props:{
cmovies:Array,
cmessage: {
type:String,
default: 'aaaa',
}
},
}
let app = new Vue({
el: '#app',
data: {
message: '你好！',
movies:['《史莱姆》','《re：0》','《虫师》']
},
components: {
son
},
methods: {
btnClick(){
//1. $children, 获取所有子组件，通过索引和属性获取值,一般不用这种方式难维护
alert(this.$children[0].message);
//2. $refs,给子组件取名 声明 ref="name" 属性
alert(this.$refs.son.message);
}
}
});
</script>
</body>
</html>
我是分割线
前台效果：
Title
- {{ movie }}
{{ cmessage }}