Lo que completé hoy es una función de anidamiento de componentes, que logra el siguiente efecto, en el que school1 y school2 tienen la misma relación de nivel
Esto es lo que pensé: primero
appuse hacerse cargo devmtodos los componentes,apphayschool1componentes yschool2componentes, y luego anidar yschool1anidarstudentenstudentcomponenteshello
Al resolver la relación entre el componente
school1y susschoo2pares, la consola reportó el siguiente error, y el extraño error me hizoschool1yschool2no puede aparecer al mismo tiempo
Después de entender la transformación, la comparación antes y después del código modificado es la siguiente [este último es el código correcto]
No hay mucho que decir, vaya directamente al código para entender
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的嵌套</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<app></app>
</div>
<script>
// 定义hello组件
const hello = Vue.extend({
template:`
<h2>{
{
message}}</h2>
`,
data(){
return{
message:'欢迎来到Vue开发学习'
}
}
})
// 定义student子组件
const student = Vue.extend({
name:'student',
template:`
<div>
<h2>学生姓名名称：{
{
name}}</h2>
<h2>学生年龄：{
{
age}}</h2>
<hello></hello>
</div>
`,
data(){
return{
name:'张小北',
age:18
}
},
// 注册组件（局部）
components:{
hello
}
})
// 定义school父组件
const school1 = Vue.extend({
name:'school1',
template:`
<div>
<h2>学校名称：{
{
name}}</h2>
<h2>学校地址：{
{
address}}</h2>
<student></student>
</div>
`,
data(){
return{
name:'长治学院',
address:'长治'
}
},
// 注册组件（局部）
components:{
student
}
})
const school2 = Vue.extend({
template:`
<div>
<h2>学校名称：{
{
name}}</h2>
<h2>学校地址：{
{
address}}</h2>
</div>
`,
data(){
return{
name:'北京大学',
address:'北京'
}
},
/* // 注册组件（局部）
components:{
}*/
})
// 定义app组件
const app = Vue.extend({
template:`
<div>
<school1></school1>
<school2></school2>
</div>
`,
components:{
school1,
school2
}
})
// 创建vm
new Vue({
el:'#root',
// 注册组件（局部）
components:{
app
}
})
</script>
</body>
</html>