vue|探索学习 Vue 组件篇第四篇组件的嵌套学习|javascript|vue.js

文章目录

探索学习 Vue 组件篇
- 第四篇组件的嵌套
- - 需求1：学生为学校的子组件
  - 需求2：定义hello组件,跟学校平级
  - 需求3：定义App组件,管理所有组件

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第四篇组件的嵌套

这一节就是学习各组件之间的嵌套，认识组件中的王者: App；

需求1：学生为学校的子组件

定义学生组件
定义学校组件
把学生组件注册到学校组件
简单粗暴的上代码
你好,{{name}}需求： 1、定义学校组件， 2、定义学生组件且学生组件为学校组件的子组件 ="text/javascript"> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 // 定义学生组件 const student = Vue.extend({ template:`学生名称：{{studentName}} 学生年龄：{{studentAge}}`, data(){ return { studentName: '安锐捷', studentAge: 3 } } })// 定义学校组件 const school = Vue.extend({ template:`学校名称：{{schoolName}} 学校地址：{{schoolAdress}}学生组件`, data(){ return { schoolName: '天津安锐捷大学', schoolAdress: '普天科技园' } }, //把学生组件注册给学校组件 components:{ // 配置的key 、 valuekey：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称 student:student } })new Vue({ el: "#root", data: { name: "安锐捷", }, //注册学校组件 components:{ school:school, } })
- 示例效果
  
  文章图片

需求2：定义hello组件,跟学校平级

直接上代码

你好,{{name}}需求2：定义hello组件，一个跟学校同级的组件 > ="text/javascript"> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 // 定义学生组件 const student = Vue.extend({ template:`学生名称：{{studentName}} 学生年龄：{{studentAge}}`, data(){ return { studentName: '安锐捷', studentAge: 3 } } })// 定义学校组件 const school = Vue.extend({ template:`学校名称：{{schoolName}} 学校地址：{{schoolAdress}}`, data(){ return { schoolName: '天津安锐捷大学', schoolAdress: '普天科技园' } }, components:{ // 配置的key 、 valuekey：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称 student:student } }) // hello 组件 const hello = Vue.extend({ template:`{{msg}}`, data(){ return { msg: '欢迎来天津安锐捷大学' } } })new Vue({ el: "#root", //template: `` // 如果容器中也不想写app ，可以直接定义在这里 data: { name: "安锐捷", }, //注册组件 components:{ hello:hello, school:school } })

示例图

文章图片

需求3：定义App组件,管理所有组件

直接上代码

你好,{{name}}需求2： 1、定义hello组件，一个跟学校同级的组件需求3： 1、定义App(Application)组件，管理页面产生的所有组件 ="text/javascript"> Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示 // 定义学生组件 const student = Vue.extend({ template:`学生名称：{{studentName}} 学生年龄：{{studentAge}}`, data(){ return { studentName: '安锐捷', studentAge: 3 } } }) // 定义学校组件 const school = Vue.extend({ template:`学校名称：{{schoolName}} 学校地址：{{schoolAdress}}`, data(){ return { schoolName: '天津安锐捷大学', schoolAdress: '普天科技园' } }, components:{ // 配置的key 、 valuekey：指组件名称(注册时候的名称，为将来使用的组件名称) valu：为定义组件时起的名称 student:student } }) const hello = Vue.extend({ template:`{{msg}}`, data(){ return { msg: '欢迎来天津安锐捷大学' } } }) const app = Vue.extend({ template:``, components:{ school:school, hello:hello } }) new Vue({ el: "#root", data: { name: "安锐捷", }, //注册学校组件 components:{ app:app, } })