非单文件组件
<div id="root">
<!-- 组件名 -->
<x></x>
<!-- 可以复用 -->
<x></x>
<br>
<student></student>
</div>
<script>
//第一步:创建shool组件
const shool = Vue.extend({
// el:'#root',// 组件定义时,不用写el这个配置,因为最后它都被一个vm管理,由vm决定服务哪个容器
template:`<div>
<h1>名称:{{shoolName}}</h1>
<h1>地址:{{addr}}</h1>
</div>`,//一定只有一个根元素包裹,这是组件的HTML结构,用template配置
data(){ //data有对象式和函数式,组件式必须要用函数式,不然报错
return { //函数式是为了可以复用,每次都返回一全新的对象,被修改也不会影响到复用的对象
shoolName:'小学',
addr:'上海'
}
}
})
// 第一步:创建student组件
const student = Vue.extend({
template:`<div>
<h1>姓名:{{studentName}}</h1>
<h1 @click="年龄加1">年龄:{{age}}</h1>
</div>`,
data(){
return {
studentName:'高高',
age:17
}
}
})
new Vue({
el:'#root',//组件要服务的容器
//局部定义组件
components:{//一个键值的方式表示
x:shool,//shool表示用的是哪个组件,但是在上面的HTML用的是x这个键名
student//如果键名一致就用简写模式
}
})
</script>
![](https://img.haomeiwen.com/i1550537/bc35fff014f9404a.PNG)
非单文件组件修改.PNG
- 修改其中一个不影响其它组件,因为这是data是函数式,每次返回的值不一样
全局定义组件
![](https://img.haomeiwen.com/i1550537/b36ef726bbe93c78.PNG)
全局注册组件.PNG
- new Vue里面的components配置中没有配置good,用的是** Vue.component('good',good)**
<div id="root">
<!-- 组件名 -->
<x></x>
<!-- 可以复用 -->
<x></x>
<br>
<student></student>
<good></good>
</div>
<script>
//第一步:创建shool组件
const shool = Vue.extend({
// el:'#root',// 组件定义时,不用写el这个配置,因为最后它都被一个vm管理,由vm决定服务哪个容器
template:`<div>
<h1>名称:{{shoolName}}</h1>
<h1>地址:{{addr}}</h1>
</div>`,//一定只有一个根元素包裹,这是组件的HTML结构,用template配置
data(){ //data有对象式和函数式,组件式必须要用函数式,不然报错
return { //函数式是为了可以复用,每次都返回一全新的对象,被修改也不会影响到复用的对象
shoolName:'小学',
addr:'上海'
}
}
})
// 第一步:创建student组件
const student = Vue.extend({
template:`<div>
<h1>姓名:{{studentName}}</h1>
<h1 @click="年龄加1">年龄:{{age}}</h1>
</div>`,
data(){
return {
studentName:'高高',
age:17
}
}
})
// 第一步:创建good组件
const good = Vue.extend({
template:`<div>
<h1>good</h1>
</div>`,
})
Vue.component('good',good)//全局配置组件
new Vue({
el:'#root',//组件要服务的容器
//局部定义组件
components:{//一个键值的方式表示
x:shool,//shool表示用的是哪个组件,但是在上面的HTML用的是x这个键名
student//如果键名一致就用简写模式
}
})
</script>
网友评论