关于VueComponent:
1.school组件本质是一个 名为VueComponent的构造函数，且不是程序员定义的，是Vue . extend生成的。
2.我们只需要写或, Vue解 析时会帮我们创建school组件的实例对象，
即Vue帮我们执行的: new VueComponent(options )。
3.特别注意:每次调用Vue . extend,返回的都是一个 全新的VueComponent! ! ! !
4.关于this指向:
(1).组件配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是[VueComponent实例对象]
(2).new Vue()配置中:
data函数、methods中的函数、watch中的函数、computed中的函 数它们的this均是[Vue实例对象]
一个重要的内置关系: VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系: 让组件实例对象(vc) 可以访问到 Vue原型上的属性、方法
vc是小型vm，没有el，data必须写成函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>4.VueComponent</title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
<hello></hello>
</div>
<script type="text/javascript">
//定义school组件
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{name}}<h2/>
<h2>学校地址：{{address}}<h2/>
<button @click="showName">提示学校名</button>
</div>
`,
data() {
return {
name: "山东大学",
address: "青岛",
};
},
methods: {
showName() {
alert(this.name);
},
},
});
//定义hello组件
const hello = Vue.extend({
template: `
<div><h2>{{msg}}</h2></div>
`,
data() {
return {
msg: "山大你好",
};
},
});
//创建vm
new Vue({
el: "#root",
components: { school, hello },
});
</script>
</body>
</html>
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
