1.定义
组件的定义:实现应用中局部功能代码和资源的集合
非单文件组件:一个文件中包含n个组件
单文件组件:一个文件中只包含1个组件
2.使用
创建组件的基本格式
创建组件的基本格式:使用Vue.extend创建组件实例,并在父级实例中注册该组件
组件的基本格式:与vm实例类似,但是不能有el,并且data只能是一个函数
接下来我们来看实例,当然了第一步老样子引入外部的vue.js
第一步先创建组件
const school = Vue.extend({
template:`
<div>
<h2>{{schoolName}}</h2>
<h2>{{schoolMessage}}</h2>
<button @click="showName">点我提示名字</button>
</div>`,
// 组件化中data写成函数形式
data(){
return{
schoolName:'国务院',
schoolMessage:'合肥'
}
},
methods:{
showName(){
alert(this.schoolName)
}
},
})
const student = Vue.extend({
template:`
<div>
<h2>{{studentName}}</h2>
<h2>{{age}}</h2>
</div>`,
data(){
return{
studentName:'王二狗',
age:18
}
}
})
第二步注册组件components(局部注册)
new Vue({
el:'#root',
// 注册组件(局部注册)
components:{
school,
student
}
})
第三步编写组件标签
<div id="root">
<!-- 编写组件标签 -->
<school></school>
<hr >
<student></student>
</div>
下面是效果图(点击了按钮后的)
上面说的是局部注册,下面我们来说一下全局注册,同样写一个实例
// 1创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>Hello {{name}}</h2>
</div>
`,
data(){
return{
name:'Tom'
}
}
})
先创建组件,然后全局注册,用Vue.component注册左边写组件名,右边写组件
// 2全局注册
Vue.component('hello',hello)
然后准备一个容器
<div id="app">
<hello></hello>
</div>
在刚才的容器中也添加hello组件
<div id="root">
<!-- 全局调用 -->
<hello></hello>
<hr >
<!-- 编写组件标签 -->
<school></school>
<hr >
<student></student>
</div>
实例中什么也不写,只绑定容器
new Vue({
el:"#app",
})
来看看效果
全局注册成功
总结