组件的嵌套
组件的嵌套也是开发中比较常见的方式
一个大组件里面有多个小组件，大组件一般称为父组件，小组件称为子组件
1 编写案例
首先定义一个 school 组件
提出新的需求:现在我想在 school 里面定义一个子组件(student)出现
首先创建 student 组件，如果我们把 student 和 school 组件一样定义在 vm 中，就平级了，体现不出来层级的感觉
可以看到，两个组件都是被 vm 包裹的
这时候就不能这么注册了，应该把子组件注册到父组件中
有点像套娃，如下图所示
但是这样有一个先后定义顺序问题，应该先定义子组件再定义父组件，不然就报错
所以应该把子组件放到前面，只有它准备就绪了，父组件才能使用
查看页面，通过开发者工具可以明确的看到层级关系
到了这里，就完成了基本的组件嵌套
2 补充
一般的开发中，都会定义一个叫 app 的组件(application 的简称)，它就是所有组件的父组件,它由 vm 直接管理
代码如下
<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script></head><body> <div id="root"> <app></app> </div> </body> <script type="text/javascript"> // 定义student组件 const student={ template:` <div> <h2>学生姓名：{{studentName}}</h2> <h2>学生年龄：{{age}}</h2> </div> `, data(){ return{ studentName:'张三', age:'18' } }, } // 定义school组件 const school={ template:` <div> <h2>学校名称：{{schoolName}}</h2> <h2>学校地址：{{address}}</h2> <student></student> </div> `, data(){ return{ schoolName:'清华大学', address:'北京' } }, // 注册子组件（局部） components:{ student } } // 定义hello组件 const hello=Vue.extend({ template:`<h1>{{info}}</h1>`, data(){ return { info:'你好！' } } }) // 定义app组件它是全部组件的父组件,由vm直接管理 const app=Vue.extend({ template: `<div> <hello></hello> <school></school> </div>` , components:{ school, hello } }) // 创建vm const vm= new Vue({ el:'#root', // 注册组件(局部) components:{ app } }) </script>
</html>
复制代码
3 总结
在 vue 开发中，组件的嵌套也是会被经常使用到的，所以也应该掌握。
评论