v-model实现父组件和子组件之间的传值

父组件中设置为:

<template>
  <div>
    <!-- msg变量传给Child的value属性(props) -->
    <Child v-model="msg"></Child>
    外面{{msg}}
  </div>
</template>

import Child from './Child'
export default {
  data () {
    return {
      msg: '123'
    }
  },
  components: {
    Child
  }

子组件设置为

<template>
  <div>
      我是个子组件: {{ value }}
      <button @click="btn">点击修改value</button>
  </div>
</template>

export default {
  props: ['value']
  methods: {
    btn () {
      // 外面v-model已经把@input内部实现了, 会把你传出去的值直接给v-model的变量
      this.$emit('input', '子组件传出来的值')
    }
  }
}

注意:父组件传递过来的值,名字必须为value,如果设置的为其他名字,则接受不到数据

如果传递给子组件变量是基础类型--------v-model双向数据绑定(遵守单向数据流)

如果是引用数据类型:不要违反单向数据流,原因:如果把这个引用类型传给孩子, 有一个孩子改变, 其他的孩子都同步了(不知道谁改的...)