Vue 组件父子组件传值

1、父组件向子组件传递数据

父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可

2、子组件向父组件传递数据

子组件通过 vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理

子组件

<template>
  <div>
    我是子组件：
    <input type="text" :value="msg" @input="changeValFn" />
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['msg'],    *//接收了父组件传递的msg*
  methods: {
    changeValFn(e) {
      this.$emit('changeMsg', e.target.value)     //*emit向父组件传递value的值*
    },
  },
}
</script>

父组件

<template>
  <div class="parent">
    <h1>我是父组件：{{ msg }}</h1>
    <child :msg="msg" @changeMsg="changeMsgFn"></child>    *//在子组件的emit中定义的changeMsg事件*
  </div>
</template>

<script>
import child from './child'
export default {
  name: 'parent',
  components: {
    child,
  },
  data() {
    return {
      msg: 'hello!',
    }
  },
  methods: {
    changeMsgFn(value) {
      this.msg = value
    },
  },
}
</script>

.sync 修饰符 实现父子组件传值

子组件

<template>
  <div>
    我是子组件：
    <input type="text" :value="msg" @input="changeValFn" />
  </div>
</template>

<script>
export default {
  name: 'child',
  props: ['msg'],
  methods: {
    changeValFn(e) {
      this.$emit('update:msg', e.target.value)
    },
  },
}
</script>

父组件

<template>
  <div class="parent">
    <h1>我是父组件：{{ msg }}</h1>
    <!-- <child v-bind:msg.sync="msg"></child> -->
    <child :msg.sync="msg"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: 'parent',
  components: {
    child,
  },
  data() {
    return {
      msg: 'hello!',
    }
  },
}
</script>