今天是2022年6月29日,是我学习vue的第十天
真的很不容易啊，转眼就十天了，昨天和朋友聊天真的觉得时间不太够用，大学相当于虚度了一年，唉，继续学吧。
非单文件组件
Vue中使用组件的三大步骤：
- 一、定义组件(创建组件)
- 二、注册组件
- 三、使用组件(写组件标签)
- 如何定义一个组件？
使用
Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下：
- 1
.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。 - 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
- 备注：使用
template可以配置组件结构。
- 如何注册组件？
- 1.局部注册：靠
new Vue()的时候传入components选项 - 2.全局注册：靠
Vue.component('组件名',{组件})
-
编写组件标签：
<组件名></组件名>
<div id="root">
<hello></hello>
<hr>
<h1>{{msg}}</h1>
<hr>
<school></school>
<hr>
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//创建school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{schoolAddress}}</h2>
<button @click="showName">点我提示学校名：</button>
</div>
`,
// el: '#root', //组 件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
data() {
return {
schoolName: '尚硅谷',
schoolAddress: '北京'
}
},
methods: {
showName() {
alert(this.schoolName)
},
},
})
//创建student组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{studentAge}}</h2>
</div>
`,
data() {
return {
studentName: 'giao',
studentAge: 19
};
},
})
//创建hello组件
const hello = Vue.extend({
template: `
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data() {
return {
name: 'Tom',
};
},
})
//全局注册组件
Vue.component('hello', hello)
// 创建vm
const vm = new Vue({
el: '#root',
data: {
msg: '你好啊！'
},
//注册组件（局部注册）
components: {
school,// school: school, //组件名:上面定义的组件
student// student: student
}
})
new Vue({
el: '#root2',
})
</script>
一个简写方式： const school = Vue.extend(options) 可简写为：const school = options
组件的嵌套
<body>
<div id="root">
<!-- <app></app> 在vm里用template写-->
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
//定义student组件
const student = Vue.extend({
name: 'student', //指定组件在开发者工具中的名字
template: `
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data() {
return {
name: 'giao',
age: 18
}
}
})
//定义school组件
const school = Vue.extend({
name: 'school', //指定组件在开发者工具中的名字
template: `
<div>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name: '尚硅谷',
address: '北京'
}
},
components: {
student
}
})
//定义hello组件
const hello = Vue.extend({
template: `
<h1>{{msg}}</h1>
`,
data() {
return {
msg: '欢迎━(*｀∀´*)ノ亻!'
}
},
})
//定义app组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
components: {
school,
hello
}
})
new Vue({
template: `
<app></app>
`,
el: '#root',
//注册局部组件
components: {
app
}
})
</script>
VueComponent
关于VueComponent：
-
school组件本质是一个名为
VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 -
我们只需要写
<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。 -
特别注意：每次调用Vue.extend，返回的都是一个全新的
VueComponent！！！！ -
关于this指向：
- 组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
- 组件配置中：
