Vue父子组件间传参和方法调用

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>