组件嵌套
示例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非单文件组件--全局注册</title>
<script type="text/javascript" src="../../Js/vue.js"></script>
</head>
<body>
<div id="root">
{{msg}}
<school></school>
<hr>
<student></student>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
//#region 创建组件(被嵌套的组件需要定义在组件之前)，即：先准备后注册
const student = Vue.extend({
template: '<div><h3>学生姓名：{{studentName}}</h3> <h3> 学生年龄：{{ studentAge }}</h3></div>',
data () {
return {
studentName: '心仪',
studentAge: 6
}
}
})
const school = Vue.extend({
template:
'<div>'
+ ' <h3>学校名称：{{schoolName}}</h3>'
+ ' <h3> 学校地址：{{ schoolAddress }}</h3>'
+ '<student></student>'
+ ' <button @click="showInfo">点我提示学校信息</button>'
+ '</div>',
data () {
return {
schoolName: '希望小学',
schoolAddress: '西安/110号/希望小学',
}
},
methods: {
showInfo () {
alert(this.schoolName + '/' + this.schoolAddress)
}
},
// 注册嵌套组件，局部
components: {
student
}
})
//#endregion
//#region root1 局部注册
new Vue({
el: '#root',
data: {
msg: '你好vue 组件|可复用',
},
// ---------------注册组件|局部注册---------------
components: {
// school: school,
// student: student,
// 上方代码等价于--可简写为如下代码
school,
student,
},
})
//#endregion
</script>
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>非单文件组件--全局注册</title>
<script type="text/javascript" src="../../Js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- {{msg}}
<school></school>
<hr>
<temp></temp>
<hr>
<student></student> -->
<!-- 容器中也可以 不写标签，但需在Vue中添加 template
template: '<app></app>',
-->
<!-- <app></app> -->
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
//#region 创建组件(被嵌套的组件需要定义在组件之前)，即：先准备后注册
const student = Vue.extend({
template: '<div><h3>学生姓名：{{studentName}}</h3> <h3> 学生年龄：{{ studentAge }}</h3></div>',
data () {
return {
studentName: '心仪',
studentAge: 6
}
}
})
const temp = Vue.extend({
template:
'<div>'
+ '<h2>你好 Vue 组件嵌套</h2>'
+ '</div>',
})
const school = Vue.extend({
template:
'<div>'
+ ' <h3>学校名称：{{schoolName}}</h3>'
+ ' <h3> 学校地址：{{ schoolAddress }}</h3>'
+ '<student></student>'
+ ' <button @click="showInfo">点我提示学校信息</button>'
+ '</div>',
data () {
return {
schoolName: '希望小学',
schoolAddress: '西安/110号/希望小学',
}
},
methods: {
showInfo () {
alert(this.schoolName + '/' + this.schoolAddress)
}
},
// 注册嵌套组件，局部
components: {
student
}
})
const app = Vue.extend({
template:
'<div>' +
'<school></school>'
+ '<temp></temp>'
+ '</div>',
components: {
school,
temp,
}
})
//#endregion
//#region root1 局部注册
new Vue({
template: '<app></app>',//等价于在 容器中 添加标签
el: '#root',
data: {
msg: '你好vue 组件|可复用',
},
// ---------------注册组件|局部注册---------------
components: {
// school: school,
// student: student,
// 上方代码等价于--可简写为如下代码
// school,
// student,
// temp,
app
},
})
//#endregion
</script>
标签：school,Vue,--,嵌套,student,组件 From： https://www.cnblogs.com/YYkun/p/18057169