将通过两个input框实现父子之间的值传递作为演示，效果图先注册父子各一个组件，代码如下












new Vue({

el: "#app",

components: {

parent: {

template: '#parent',

data() {

return {

text: ''

}

},

components: {

son: {

template: '#son'

}

}

}

}

})
new Vue({

el: "#app",

components: {

parent: {

template: '#parent',

data() {

return {

text: ''

}

},

components: {

son: {

template: '#son'

}

}

}

}

}) 一、父传子 一、父传子 一、父传子再父组件通过属性传递值

子组件通过props属性接受
components: {

son: {

template: '#son',

props:['text'] //通过props属性接受父传递过来的值

}

}
components: {

son: {

template: '#son',

props:['text'] //通过props属性接受父传递过来的值

}

}这样我们就可以使用父组件传递过来的值了

看下现在的效果父组件向子组件传递成功二、子传父二、子传父二、子传父通过父组件自定义事件，然后子组件用$emit(event,aguments)调用



components: {

parent: {

template: '#parent',

data() {

return {

text: ''

}

},

components: {

son: {

template: '#son',

props: ['text']

}

},

methods: {

item(v) { //自定义事件触发的方法

this.text = v //使用子组件传递过来的值改变this.text数据

}

}

}

}



components: {

parent: {

template: '#parent',

data() {

return {

text: ''

}

},

components: {

son: {

template: '#son',

props: ['text']

}

},

methods: {

item(v) { //自定义事件触发的方法

this.text = v //使用子组件传递过来的值改变this.text数据

}

}

}

}再子组件触发自定义事件




components: {

parent: {

template: '#parent',

data() {

return {

text: ''

}

},

components: {

son: {

template: '#son',

props: ['text'],

methods: {

emit() {

this.$emit('ev', this.$refs.son.value) //触发自定义事件，并传递值

}

}

}

},

methods: {

item(v) {

this.text = v

}

}

}

}




components: {

parent: {

template: '#parent',

data() {

return {

text: ''

}

},

components: {

son: {

template: '#son',

props: ['text'],

methods: {

emit() {

this.$emit('ev', this.$refs.son.value) //触发自定义事件，并传递值

}

}

}

},

methods: {

item(v) {

this.text = v

}

}

}

}这样就完成了子传父，父传子，效果也完成了总结总结总结