v-model 的父子組件傳值

父組件：
 <template>
  <div>
    <aa class="abc" v-model="test" ></aa>  // 組件中使用v-model
      {{'外面的值：' + test}} // 這兒試驗test與內部msg值爲雙向綁定關係
    <button @click="fn">
      外面改變裏面
    </button>
    
  </div>
</template>

<script>
import aa from './test.vue'
  export default {
    data () {
      return {
        test: ''
      }
    },
    methods: {
      fn () {
        this.test += 1 
      }
    },
    components:{
      aa
    }
  }
</script>
<template>
  <div>
    <ul>
      <li>{{'裏面的值：'+ msg}}</li>
      <button @click="fn2">裏面改變外面</button>
    </ul>
  </div>
</template>

<script>
  export default {
    model: {    // 使用model， 這兒2個屬性，prop屬性說，我要將msg做爲該組件被使用時（此處爲aa組件被父組件調用）v-model能取到的值，event說，我emit ‘cc’ 的時候，參數的值就是父組件v-model收到的值。
      prop: 'msg',
      event: 'cc'
    },
    props: {
      msg: ''
    },
    methods: {
      fn2 () {
        this.$emit('cc', this.msg+2)
      }
    }
  }
</script>

prop的單向綁定:當父組件的屬性變化時，將傳導給子組件，可是不會反過來。這是爲了防止子組件無心修改了父組件的狀態——這會讓應用的數據流難以理解。 
另外，每次父組件更新時，子組件的全部 prop 都會更新爲最新值。這意味着你不該該在子組件內部改變 prop。若是你這麼作了，Vue 會在控制檯給出警告。官方文檔解釋
--------------------- 
 

方法1.咱們經過['value']能夠獲取到父組件給子組件傳遞的值，用過註冊input方法方法來經過子組件給父組件傳值。(由於v-model是一個語法糖,他有兩個方法,自動綁定value,自動觸發input)

父組件
<div>
  <child v-model="message"></child>
  <!-- 經過v-model將message綁定在child上 -->
</div>
<script>
  export default{
   compoments:"child",
   data(){
   return{
     message:"",
    }
   }
}
</script>
子組件
<div @click="click">
   {{msg}}
<div>

// 子組件
export default {
  name: '',
  props: {
    // 經過value獲取綁定message值
    value: {
      type: String,
      default: ''
    }
  },
  data: {
    // 你的數據
  },
  methods: {
    click(){
      this.msg+1
    }
    changeMessage() {
      // 經過觸發組件的input事件改變message的值，
      // 此時父組件中的message值就改變爲你設置的值了
      this.$emit('input', 'your message value')
    }
  }
})

寫法二