1.子组件传值给父组件
子组件定义一个方法,方法中通过this.$emit(‘childValChange’,this.num)方式发送数据value,父组件中监听childValChange事件,当事件触发时,执行函数,进行赋值。
<!-- 父组件页面 -->
<template>
<!-- 使用子组件 -->
<child ref="child" @childvalChange="childvalChange"></child>
</template>
<script>
import child from './child' //引入组件
export default {
name: 'Parent',
components: { child}, // 组件注册
data() {
return {
value: null
}
},
methods: {
// 获取子组件参数
childvalChange(val){
this.value = val
}
}
}
</script>
<!-- 子组件页面 -->
<template>
</template>
<script>
export default {
name: 'Child',
data() {
return {
value: 1
}
},
methods: {
// 向父组件参数
childvalChange(){
this.$emit('childvalChange', this.value)
}
}
}
</script>
2.父组件向子组件传参,调用子组件方法
方法一:给子组件添加标识ref=“child”,父组件直接调用子组件方法并传值——this.$refs.child.getValue(this.value);
方法二:props传值,给子组件绑定参数 :value2=“value2”,子组件页面定义好props中参数,如果是实时动态传值,则对传过来的值需要用watch监听并赋值。
<!-- 父组件页面 -->
<template>
<!-- 使用子组件 -->
<child ref="child" :value2="value2"></child>
</template>
<script>
import child from './child' //引入组件
export default {
name: 'Parent',
components: { child}, // 组件注册
data() {
return {
value1: 1
value2: 2
}
},
methods: {
// 调用子组件方法并参数
sendValue(){
this.$refs.child.getValue(this.value1);
}
}
}
</script>
<!-- 子组件页面 -->
<template>
</template>
<script>
export default {
name: 'Child',
props: {
value2: {
type: String,
default: null
}
},
data() {
return {
value1: null
value2: null
}
},
watch: {
// 监听参数并复制
value2(val) {
this.value2 = val
}
},
methods: {
// 获取父组件参数
getValue(val){
this.value1 = val
}
}
}
</script>