vue 父子组件传参数

有时候你一个功能模块要在多个地方使用到，这样，我们可以把这个功能模块封装成一个组件，这样有时候就避免不了要父子传参。

在Vue中，父组件通过prop给子组件下发数据（向下传递），子组件通过事件给父组件发送信息（向上传递）。如图：

 

父组件：parent.vue

<!-- 父组件 -->
<template>
    <div>
      <child :parent='parentValue' @childFn="parentFn"></child>
      <p>子组件传来的值 : {{childValue}}</p>
    </div>
</template>

<script>
import child from '@/components/child'
export default {
    components: {
        child
    },
    data: {
        parentValue: '我是父组件的值',
        childValue: ''
    },
    methods: {
       parentFn(val) {
        this.childValue= val
      }
    }
}
</script>

子组件：child.vue

<!-- 子组件 -->
<template> 
    <div>
        <input type="text" v-model="message" />
        <button @click="toUp">传给父组件</button>
        <p>{{parent}}</p>
    </div>
</template>
<script>
export default {
    props: {
        parent: {
            type: String,
            default: '父组件什么都没传过来'
        }
    },
    data() {
        return {
          message: ''
        }
    },
    methods: {
      toUp() {
            // 使用 $emit('函数名称', 参数, 参数, ....) 向父组件传递值
            this.$emit('childFn', this.message==='' ? '子组件传来的' : this.message)
        }
    }    
}
</script>

如有错误，欢迎指出~~