Table of contents
For full content, please pay attention to:
First, the basic use of components
2. Global components and local components
Global registration, via Vue.component
Local registration, via components:{}
Third, the difference between parent components and child components
Foreword:
For full content, please pay attention to:
(1 message) Basic learning of Vue
First, the basic use of components
Simple component use example
Components are reusable Vue instances with a name:
In this example it's button-counter. We can use this component as a custom element in a Vue root instance created with new Vue: <button-counter></button-counter>
templatein is the DOM element content of the component.
<button-counter></button-counter> using components
<div id="app">
<button-counter></button-counter>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:'<button @click="handle">点击了{
{count}}</button>',//只能有一个根元素
methods:{
handle:function(){
this.count++
}
}
})
const vm = new Vue({
el:"#app",
data(){
return{
}
}
})
</script>2. Global components and local components
Global registration, via Vue.component
Partial registration, through components:{}
global component
Global components, which can be used in multiple vue instances, similar to global variables.
Use the Vue.component('HelloWorld', {data(){}})method to register and use the <button-counter></button-counter>call directly. HelloWorldis the name of the global component and {data(){}}is the defined component object.
<hello-world></hello-world>
Second global component via <HelloWorld></HelloWorld>
Implemented in rendering
<div id="app">
<button-counter></button-counter>
<hello-world></hello-world>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('HelloWorld',{
data(){
return{
msg:"HelloWorld"
}
},
template:`<div>{
{msg}}</div>`
})
Vue.component('button-counter',{
data:function(){ //必须是函数
return{
count:0
}
},
template:`
<div>
<button @click="handle">点击了{
{count}}</button>
<HelloWorld></HelloWorld>
</div>`,
//只能有一个根元素
methods:{
handle:function(){
this.count++
}
}
})
const vm = new Vue({
el:"#app",
data(){
return{
}
}
})
</script>local components
Local components can only be used in objects mounted by the current vue instance. Similar to local variables, they have block-level scope.
The usage method is the same as the global variable, directly use the <hello-world></hello-world>call
<div id="app">
<hello-world></hello-world>
<hello-tom></hello-tom>
<hello-jerry></hello-jerry>
</div>
<script src="./vue.js"></script>
<script>
let HelloWorld ={
data:function(){
return{
msg:'HelloWorld'
}
},
template:`<div>{
{msg}}</div>`
};
let HelloTom ={
data:function(){
return{
msg:'HelloTom'
}
},
template:`<div>{
{msg}}</div>`
};
let HelloJerry ={
data:function(){
return{
msg:'HelloJerry'
}
},
template:`<div>{
{msg}}</div>`
}
const vm = new Vue({
el:"#app",
data:{
},
components:{
'hello-world': HelloWorld,
'hello-tom': HelloTom,
'hello-jerry': HelloJerry,
}
})
</script>Third, the difference between parent components and child components
The above code defines two component objects cpn1and cpn2, which cpn2are registered with local components in the component cpn1, and templateregistered cpn1in the component, and then registered with the local component cpn2in the vue instance, which is called in the div mounted by the vue instance. cpn2, cpn2and cpn1form a parent-child component relationship.
Note: A component is a vue instance, and the attributes of the vue instance can also have components, such as data, methods, computed, etc.
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
// 1.创建组件构造器对象
const cpn1 = Vue.extend({
template:`
<div>
<h2>标题1</h2>
<p>组件1</p>
</div>`
})
// 组件2中使用组件1
const cpn2 = Vue.extend({
template:`
<div>
<h2>标题2</h2>
<p>组件2</p>
<cpn1></cpn1>
</div>`,
components:{
cpn1:cpn1
}
})
const app = new Vue({
el:"#app",
components:{//局部组件创建
cpn2:cpn2
}
})
</script>