DOCTYPE html > < html> < head> < title> title > < scriptsrc = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > head > < body> < divid = " example" > < my-component> my-component > < br> < Child> Child > div > < br> < divid = " example2" > < my-component> my-component > < br> < Child> Child > div > body > < script>
Vue. component ( 'my-component' , {
template : '111 '
} )
var Child = {
template : ` A custom component! --- {{count}}
` ,
data : function ( ) {
return {
count : '11'
}
}
}
new Vue ( {
el : '#example' ,
components : {
Child
}
} )
new Vue ( {
el : '#example2'
} )
script > html > DOCTYPE html > < html> < head> < title> title > < scriptsrc = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > head > < body> < divid = " example" > < my-component> my-component > div > body > < script>
var Child = {
template : ` A custom component! --- {{count}}
` ,
data : function ( ) {
return {
count : '11'
}
}
}
Vue. component ( 'my-component' , {
template : `
111
` ,
components : {
'my-component2' : Child
}
} )
new Vue ( {
el : '#example'
} )
script > html > DOCTYPE html > < html> < head> < title> title > < scriptsrc = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > head > < body> < divid = " example-2" > < childmessage = " hello" > child > < br/> < childmessage = " world" > child > < br/> < child2initial-counter = " 6" > child2 > < br/> < child2v-bind: initial-counter= " count" > child2 > < br/> < child2v-for = " item in posts" v-bind: initial-counter= " item.title" > child2 > body > < script>
Vue. component ( 'child' , {
props : {
message : {
type : String,
default : "default message"
}
} ,
template : '{{ message }}
} )
Vue. component ( 'child2' , {
props : [ 'initialCounter' ] ,
template : ' {{ count }} ,
data : function ( ) {
return {
count : this . initialCounter
}
}
} )
new Vue ( {
el : '#example-2' ,
data : {
count : 10 ,
posts : [
{ id : 1 , title : 'One' } ,
{ id : 2 , title : 'Two' } ,
{ id : 3 , title : 'Thre' }
]
}
} )
script > html > DOCTYPE html > < html> < head> < title> title > < scriptsrc = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > head > < body> < divid = " example-2" > < child@fun = " mainFun" > child > < inputtype = " text" v-model = " context" > div > body > < script>
Vue. component ( 'child' , {
template : ` 组件 {{context}}
` ,
methods : {
funHandle ( ) {
this . $emit ( 'fun' , '返回父组件内容' )
}
} ,
data : function ( ) {
return {
context : '1111'
}
}
} )
new Vue ( {
el : '#example-2' ,
methods : {
mainFun ( num ) {
console. log ( '子组件返回内容：' + num )
}
} ,
data : {
context : '111'
}
} )
script > html > DOCTYPE html > < html> < head> < title> title > < scriptsrc = " https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > script > head > < body> < divid = " example-2" > < h2> h2 > < childtitle = " 五年级一班" @fun = " mainFun" v-model = " totalPerson" > child > div > body > < script>
Vue. component ( 'child' , {
template : ` {{title}}
` ,
props : [ 'title' , 'totalPerson' ] ,
methods : {
funHandle ( ) {
this . count++ ;
alert ( totalPerson) ;
this . $emit ( 'fun' , this . count)
}
} ,
data : function ( ) {
return {
count : 0
}
}
} )
new Vue ( {
el : '#example-2' ,
methods : {
mainFun ( num ) {
console. log ( '子组件返回内容：' + num ) ;
this . totalPerson += num;
}
} ,
data : {
totalPerson : 0
}
} )
script > html >
