基本使用
1.创建组件
2.注册组件（全局组件、局部组件）
<body>
<div id="root">
<hello></hello>
<school></school>
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
// 第一步：创建学校组件
const school = Vue.extend({
template:`
<div>
<h2 >学校名称:{{schoolName}}</h2>
<h2 >学校地址:{{address}}</h2>
<button :click="showSchoolName">点我提示学校名</button>
</div>
`,
data(){
return {
schoolName:'清华大学',
address:'北京'
}
},
methods: {
showSchoolName() {
alert(this.schoolName)
}
},
})
// 第一步：创建学生组件
const student = Vue.extend({
template: `
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
studentName: '张三',
age: 18
}
}
})
// 第一步：创建hello组件
const hello = Vue.extend({
template: `
<div>
<h2>你好啊:{{name}}</h2>
</div>
`,
data() {
return {
name: '张三3',
}
}
})
// 第二步：注册组件（全局注册）
Vue.component('hello', hello)
const vm = new Vue({
el: "#root",
// 第二步：注册组件（局部注册）
components:{
school:school,
student:student
}
})
new Vue({
el: "#root2",
})
</script>
</body>
注意:
1.关于组件名
一个单词组成
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）: my-school
第二种写法（CamelCase命名）: MySchool
备注：
（1）组件名尽可能回避html 中已有的元素名称。例如：H2 h2都不行
（2）可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签
第一种写法：<school></school>
第二种写法:<school/>
备注：不用 使用脚手架时，<school />会导致后续的组件不能渲染
3.一个简写方式
const school= Vue.extend(options) 可简写为 const school= options
组件嵌套
// 第一步：创建student组件
const student = Vue.extend({
name: 'student',
template: `
<div>
<h2 >学生姓名:{{studentName}}</h2>
<h2 >年龄:{{age}}</h2>
</div>
`,
data() {
return {
studentName: '清华大学',
age: 18
}
}
})
// 第一步：创建school组件
const school = Vue.extend({
name: 'school',
template:`
<div>
<h2 >学校名称:{{schoolName}}</h2>
<h2 >学校地址:{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
schoolName:'清华大学',
address:'北京'
}
},
components: {
student
}
})
// 定义app组件
const app = Vue.extend({
name: 'app',
template: `
<div>
<hello></hello>
<school></school>
</div>
`,
components: {
school,
}
})
const vm = new Vue({
el: "#root",
template: `
<app></app>
`,
// 第二步：注册组件（局部注册）
components:{
app
}
})
VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写<school/>或<school></school>，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实例对象】
5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)
Vue的实例 对象，以后简称为vm
网友评论