1、Vue中创建组件的三大不步骤
(1)定义组件(创建组件)
(2)注册组件
(3)使用组件(编写组件标签)
2、定义一个组件
使用Vue.extend(options)创建,其中options和New Vue(options)时传入的那个options几乎一样 ,但也有区别
区别如下:
1、el不要写,为什么?-----最终所有的组件都要经过一个vm管理,由vm中的el决定服务的是哪个容器
2、data必须写成函数,为什么?----避免组件被复用时,数据存在引用关系
3、注册组件
1、局部注册:new Vue的时候传入components选项
2、全局注册:Vue.component('组件名‘,组件)
4、组件标签
例如:创建一个名为 hello的组件
使用组件标签为: <hello></hello>
5、基本使用组件-Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单文件多组件-基本使用</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<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>学校地址:{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
`,
data(){
return {
schoolName:'复旦大学',
address:'上海'
}
},
methods:{
showName(){
alert(this.schoolName)
}
}
})
//第一步:创建student组件
const student = Vue.extend({
template:`
<div>
<h2>学生名称:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data(){
return{
studentName:'Tom',
age:'19'
}
}
})
const hello = Vue.extend({
template:`
<div>
<h2>欢迎你:{{name}}</h2>
</div>
`,
data(){
return{
name:'小明'
}
}
});
//注册全局组件
Vue.component('hello',hello)
new Vue({
el: '#root',
data: {
msg:'你好呀!'
},
//第二步:注册组件 (局部注册)
components:{
school,
student
}
})
new Vue({
el: '#root2'
})
</script>
</html>
6、注意点
一、关于组件名:
一个单词组成写法:(首字母小写):school 或者(首字母大写):School
多个单词组成写法:(kebab-case命名):my-school 或者(CameCase):MySchool(需要Vue脚手架支持)
二、关于组件标签:
第一种写法:<hello></hello>
第二种写法:<hello/>
注意:不使用脚手架时,<hello/>会导致后续组件不能渲染
三、简写方式
const hello = Vue.extend(options) 可简写为 cosnt hello = options