父组件:
<template>
<div class="parent">
<div>我是父组件,给子组件传值(传:我是父组件)----{{msg2}}</div>
<!--在子组件上v-on来监听该事件,有变化则调用exportMsg方法-->
<transmit-child :child-msg="msg" v-on:clickMsg="exportMsg"></transmit-child>
</div>
</template>
<script>
import child from '@/components/child'
export default {
name: 'parent',
data () {
return {
arr: [1, 2, 3, 4],
msg: '我是父组件',
msg2: ''
}
},
components: {
'transmit-child': child
},
methods: {
exportMsg (childValue) {
console.log('fu')
this.msg2 = childValue
}
}
}
</script>
子组件:
<template>
<div class="child">
<div>我是子组件</div>
<div>{{childMsg}}</div>
<button @click="transmit">通过事件向父组件传递消息</button>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
msg: '我是子组件'
}
},
// props是组件的一个单独选项,不能写在data中
props: ['childMsg'],
methods: {
transmit () {
console.log('zi')
// 事件名称('clickMsg')和需要传递给父组件的值(msg)
this.$emit('clickMsg', this.msg)
}
}
}
</script>
- 父组件传递数据给子组件。是通过子组件设置props选项中自定义属性来接收来自父组件的数据。父组件中子组件的地方使用
v-bind:自定义属性(该属性必须为子组件的props的值)
父组件传值则为v-bind:自定义属性(该属性必须为子组件的props的值)=‘父组件需要传的值’
。 - 子组件通过事件触发向父组件传递消息。截取子组件
methods
方法代码如下:
methods: {
transmit () {
console.log('zi')
// 事件名称('clickMsg')和需要传递给父组件的值(msg)
this.$emit('clickMsg', this.msg)
}
}
点击子组件,执行transmit
方法,进而执行了this.$emit('clickMsg', this.msg)
方法。第一个参数为事件名称,第二个参数为子组件中需要传递给父组件的值。在父组件中子组件的地方使用v-on:clickMsg="exportMsg"
来监听子组件的事件触发。一旦触发,则会执行父组件中的exportMsg
方法,方法代码如下:
methods: {
exportMsg (childValue) {
console.log('fu')
this.msg2 = childValue
}
}
this.$emit('clickMsg', this.msg)
中的this.msg
会传递给childValue
进而达到传值的目的。
注意:v-on:clickMsg="exportMsg "
方法后不要加括号,更不要写括号里还写参数的形式。因为子组件一般是要传值给父组件的,需要传值,只在父组件的methods方法中定义方法时,写带参数的形式即可,子组件传递过来的值会传给参数的。而在v-on:clickMsg="exportMsg "
方法后加括号,则必须写传给参数的值,而该值必须为父组件中已经定义的data中得值,这里非常重要,虽可以这么写,但是,我们可以在方法中用this.
来引用data
中得值