总结
Vue.component('组件的标签',{
template: '模板内容'
})
Vue.component('child',{
template: '<div></div>'
})
Vue.component('parent',{
template: `<div>
<child></child>
</div>`
})
- 组件传值
- 父子组件传值
Vue.component('child',{
props: ['child_id'],
template: '<div>{{child_id}}</div>'
})
Vue.component('parent',{
template: `<div>
<child :child_id="id"></child>
</div>`,
data() {
return {
id: '123'
}
}
})
- 子组件向父组件传值
- 例如将子组件中的id传递给父组件
Vue.component('child',{
template: '<div @click="fun">{{child_id}}</div>',
data() {
return {
id: '123'
}
},
methods: {
fun() {
this.$emit('eve', this.id)
}
}
})
Vue.component('parent',{
template: `<div>
<child @eve="getId"></child>
</div>`,
data() {
return {
}
},
methods: {
getId(id) {
console.log(id)
}
}
})
var bus = new Vue()
var app = new Vue({
el: '#app',
data: {
bus
}
})
Vue.component('child-one',{
template: '<div @click="fun">{{child_id}}</div>',
data() {
return {
id: '123'
}
},
methods: {
fun() {
this.$root.$bus.$emit('eve', this.id)
}
}
})
Vue.component('child-two',{
template: `<div>
<child></child>
</div>`,
data() {
return {
}
},
created() {
this.$root.$bus.$on('eve', function(data) {
console.log(data)
})
},
methods: {
}
})