Vue 组件化编程
非单文件组件
一个文件中包含n个组件。
<!DOCTYPE html>
<html>
<head>
<meta lang="zh-cn">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
{{msg}}<br/>
<hr>
<school></school>
<hr>
<student></student> <!-- 组件名称标签 -->
<hr>
<student></student>
</div>
</body>
<script>
// 使用 Vue.extend 语法创建组件
const school = Vue.extend({
template: `
<div>
学校名称：{{name}}<br/>
学校地址：{{address}}<br/>
<button @click='onClick'>点我显示事件</button>
</div>
`,
// el: '#root', 一定不能在Vue组件中写el配置项，因为最终所有组件都要被一个vm管理，由vm决定服务于哪个容器
data(){ // 组件中data一定要用函数式，不然多个组件被多次引用时多个操作会作用于一个对象实例
return {
name: 'school-name',
address: 'xxx',
}
},
methods: {
onClick(){
console.log(`学校组件的按钮被点击`);
}
},
});
const student = Vue.extend({
template: `
<div>
学生名称：{{name}}<br/>
年龄：{{age}}
</div>
`,
data(){
return {
name: 'name',
age: 18,
}
}
});
Vue.component('student', student);
new Vue({
el: '#root',
data:{
msg: 'message',
},
// 注册局部组件school，只有在这个vm对象作用域内才能使用
components:{
school,
}
})
</script>
</html>
组件嵌套
<!DOCTYPE html>
<html>
<head>
<meta lang="zh-cn">
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
</div>
</body>
<script>
const student = Vue.extend({
template: `
<div>
学生名称：{{name}}<br/>
年龄：{{age}}
</div>
`,
data(){
return {
name: 'name',
age: 18,
}
}
});
// school 组件嵌套 student 组件
const school = Vue.extend({
template: `
<div>
学校名称：{{name}}<br/>
学校地址：{{address}}<br/>
<button @click='onClick'>点我显示事件</button>
<hr/>
<student></student>
</div>
`,
data(){
return {
name: 'school-name',
address: 'xxx',
}
},
methods: {
onClick(){
console.log(`学校组件的按钮被点击`);
}
},
// 在组件中注册组件
components: {
student
}
});
const hello = Vue.extend({
template: `<h2>{{msg}}</h2>`,
data(){
return {
msg: 'hello world',
}
}
});
// 创建一个用于管理其他组件的顶层组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hr>
<hello></hello>
</div>
`,
// 顶层组件需要注册直接使用的两个组件
components: {
school,
hello,
},
});
new Vue({
el: '#root',
template:`
<app></app>
`,
data:{
msg: 'message',
},
// 注册局部组件school，只有在这个vm对象作用域内才能使用
components:{
app,
}
})
</script>
</html>
VueComponent 构造函数
- 组件本质时一个名为 VueComponent 的构造函数，不是程序员定义的，时Vue.extend生成的
- 写下
<组件名称></组件名称>，Vue解析时会创建组件实例对象，即Vue帮我们执行的：new VueComponent(options) - 注意：每次调用 Vue.extend 返回的都是一个全新的 VueComponent
- 关于this指向：
- 组件配置：
data函数、methods函数、watch中函数、computed中函数，它们this均指向 VueComponent 实例对象 new Vue()配置中：
data函数、methods函数、watch中函数、computed中函数，它们this均指向 Vue 实例对象
- 组件配置：
- VueComponent的实例对象，简称vc（也可称为：组件实例对象）
Vue实例对象，简称 vm
如图，Vue实例对象内部有 $children 属性，管理包含的 VueComponent；VueComponent 实例内部也有 $children 属性，管理包含的子组件。
Vue实例与组件实例内置关系
vm与vc的绝大多数属性都是相同的。vc有的vm都有，但是 vm 有 el 而 vc 没有。
组件是可复用的 Vue 实例，且带有一个名字。因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
- VueComponent.prototype.__proto__ === Vue.prototype
- 这个关系让组件实例对象vc可以访问呢到Vue原型上的属性、方法
在js中实例的隐式原型属性永远指向自己缔造者的原型对象
单文件组件
一个文件中只包含1个组件。
标签：school,Vue,name,编程,实例,组件,data From： https://www.cnblogs.com/zhh567/p/16590030.html