vue组件及组件传值

总结

创建一个组件 Vue.component('组件的标签'，{ template: '模板内容' }) // 例如 定义一个子组件 Vue.component('child'，{ template: '<div></div>' }) // 定义一个父组件 将子组件在父组件中使用 Vue.component('parent'，{ template: `<div> <child></child> </div>` }) 组件传值父子组件传值 // 例如 定义一个子组件 Vue.component('child'，{ // 在子组件中通过props接收父组件中的自定义属性 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 是一个事件映射 可以看做自定义了一个事件 他的第一个参数是自定义的事件名称 // 第二个参数是要传递的变量 this.$emit('eve', this.id) } } }) // 定义一个父组件 将子组件在父组件中使用 Vue.component('parent'，{ // 在父组件的子组件标签中绑定自定义事件 （这个事件名称要入this.$emit定义的事件名称保持一致） template: `<div> <child @eve="getId"></child> </div>`, data() { return { } }, methods: { getId(id) { // 在该函数中就可以接受到子组件传递过来的变量了 默认参数就是传递的变量 console.log(id) } } }) 非父子组件传值例如 将组件一中的id传递给组件二 var bus = new Vue() //定义一个bus总线 // Vue.prototype.$bus = bus //将bus挂载在自己的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() { // 如果采用bus挂载在原型上的写法 // this.$bus.$emit('eve', this.id) // 如果采用将bus放入根组件的data中 this.$root.$bus.$emit('eve', this.id) } } }) Vue.component('child-two'，{ template: `<div> <child></child> </div>`, data() { return { } }, created() { // 如果采用bus挂载在原型上的写法 // this.$bus.$on('eve', function(data){ // console.log(data) // }) // 如果采用将bus放入根组件的data中 this.$root.$bus.$on('eve', function(data) { console.log(data) }) }, methods: { } })