在Vue中，父子组件之间是不存在v-model双向绑定的，双向绑定会造成维护上的问题。

在vue中关于父子组件之间传值有几种方式：

1、使用vuex状态管理进行中间存储值的操作；

2、使用自定义事件方式。

vuex在这里不说了，现在来说自定义事件方式。

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

使用prop向子组件传递数据：

a.在子组件中定义一个prop属性: msg

b.在父组件中通过 msg=”value” 来向子组件中传递数据，如果数据为响应式的，使用 v-bind:msg=”msg” （简写为 :msg=”msg” ）

 //父组件
<template>
  <div id="app">
    <h1>{{msg}}</h1>
    <HelloWorld :msg="msg"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  data() {
    return {
      msg: '这是父组件', 
    }
  },
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>  

 //子组件
<template>
  <div  style="background-color: aquamarine">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  }
}
</script>  

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

• 1、使用自定义修饰事件

a.在父组件中自定义事件名，调用父组件中的方法：@fun=”funParent”

b.子组件中的方法调用自定义事件，并传递参数：this.$emit(‘自定义事件名’,参数1，参数2，参数3…)

c.父组件中的方法接收子组件方法的参数：funParent(参数1，参数2，参数3…)

 <template>
  <div id="app">
    <h1>{{msg}}</h1>
    <button @click="setMsg">父组件按钮</button>
      //a，父组件中自定义事件fun,调用父组件中的方法getChildmsg
    <HelloWorld :msg="msg" @fun="getChildmsg"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  data() {
    return {
      msg: '这是父组件',  
    }
  },
  methods: {
     //父组件中的方法，将子组件中传递出来的数据设置到msg上
    //getChildmsg(参数1，参数2，参数3...)
    getChildmsg(data) {
      this.msg = data
    },
    setMsg() {
      this.msg = "这是父组件"
    }
  },
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>  

 <template>
  <div class="hello" style="background-color: aquamarine">
    <h1>{{ msg }}</h1>
    <button @click="toParent">子组件按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      childmsg: "这是子组件"
    }
  },
  methods: {
    //子组件按钮事件方法，调用自定义事件，向外传递数据childmsg
    //this.$emit('自定义事件名',参数1，参数2，参数3...)
    toParent() {
      this.$emit('fun',this.childmsg)
    }
  }
}
</script>  

测试：

• 2、使用sync修饰符

2.3.0+新增的，作为一个语法糖来使用，简化上面1的步骤

a.修改父组件中的事件名

注， “update:” 前缀一定要完全一致

 <HelloWorld :msg="msg" @update:msga="getChildmsg"/>  

b.子方法中同步修改

 toParent() {
      this.$emit('update:msga',this.childmsg)
    }  

c.将getChildmsg改为匿名方法，并删除getChildmsg方法

 <HelloWorld :msg="msg" @update:msga="function(data) { msg = data}"/>  

d.继续修改

 <HelloWorld :msg="msg" @update:msga="data => msg = data"/>  

e.最终成型

 <HelloWorld :msg="msg" :msga.sync="msg"/>  

• 3.使用ref属性

将子组件定义一个ref属性

 <HelloWorld :msg="msg" ref="child"/>  

在父方法中调用

 this.msg = this.$refs.child.childmsg