组件嵌套
示例一:
<!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>
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!