今天是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实例对象】。
