欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
4、我们可以使用name属性，定义组件在vue开发者工具中的名称
注意：这个VueComponent不是程序员定义的，而是Vue.extend生成的。
3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent构造函数。
①在组件中：this指的是VueComponent构造函数（即：组件）本身。
②在Vue实例中：this指的就是vue实例本身（即：vm）。
三、对Vue.extend、VueComponent构造函数、组件的深入理解（重要）
2、创建组件时，Vue.extend会返回一个构造函数给组件变量。
一、组件的嵌套
1、什么是组件的嵌套？
组件的嵌套，就是让一个组件中，可以包含其他组件，这样逻辑性更强。
举例：
如图，为了方便管理组件，我们会在vue实例vm下面，定义一个叫app的组件，然后在app组件中再嵌套其他的子组件，然后子组件又嵌套其他的孙组件。
可见，app组件是“一人（vue实例）之下，万人（其他组件）之上”的地位。
2、为什么需要组件的嵌套？
规范化我们的vue项目开发，使得代码更有逻辑性。
3、举例：
<body>
<!-- 准备好一个容器 -->
<div class="root">
</div>
<script type="text/javascript">
//定义student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{
{name}}</h2>
<h2>学生爱好：{
{hobby}}</h2>
</div>
`,
data(){
return {
name:'小明',
hobby:'打篮球'
}
}
})
//定义school组件
const school = Vue.extend({
template: `
<div>
<h2>学校姓名：{
{name}}</h2>
<h2>学校地址：{
{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name: '尚硅谷',
address: '北京'
}
},
//局部注册组件
components:{
student:student
}
})
//定义hello组件
const hello = Vue.extend({
template: `
<div>
<h2>msg</h2>
</div>
`,
data() {
return {
msg:'你好啊'
}
}
})
//定义app组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
data() {
return {
name: '尚硅谷',
address: '北京'
}
},
components:{
school:school,
hello:hello
}
})
//创建vue实例
new Vue({
//html（省的在模板中写了）
template:`<app></app>`,
el: '.root', //el就是element（元素）的意思，用于将该vue实例与容器进行绑定
//注册组件（局部）
components:{
app:app,//二者相同，可省略一个
}
})
</script>
</body>运行效果：
上述app、hello、school、student这四个组件的关系如下：
最低0.47元/天 解锁文章
扫一扫
1979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
