vue props雙向綁定

使用 Prop 傳遞數據

組件實例的做用域是孤立的。這就代表不能在子組件的模板內直接引用父組件的原始數據。父組件的數據須要經過 prop下發到子組件中才能使用。
Prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是反過來不會傳遞。這是爲了防止子組件無心間修改了父組件的狀態。

特殊狀況

好比彈窗，點擊子組件外部的按鈕能夠控制子組件顯示與隱藏，點擊子組件內部也能夠控制子組件隱藏，此時須要屬性共享

解決

父組件

<div id="app">
      <table>
        <tr>
            <th colspan="3" @click="show">父組件數據</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{name}}</td>
            <td><input type="text" v-model="name"/></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ age }}</td>
            <td><input type="text" v-model="age" /></td>
        </tr>
      </table>
    </div>

子組件

<my-child v-bind:my-name="name" v-bind:my-age="age" v-bind:is-show="showc" @on-show-change='changeShow'></my-child>

<template id="isChild">
      <table v-show="show">
        <tr>
            <th colspan="3" @click="change">子組件數據</td>
        </tr>
        <tr>
            <td>name</td>
            <td>{{myName}}</td>
            <td><input type="text" v-model="myName"/></td>
        </tr>
        <tr>
            <td>age</td>
            <td>{{ myAge }}</td>
            <td><input type="text" v-model="myAge" /></td>
        </tr>
      </table>
    </template>

實例化

var vue = new Vue({
    el:'#app',
    data:{
      showc:false,//父組件屬性，傳入子組件控制顯示隱藏
      name:'han',
      age:'20'
    },
    methods:{
      show () {
        this.showc = !this.showc;//外部控制
      },
      changeShow (val) {//外層調用組件方註冊變動方法，將組件內的數據變動，同步到組件外的數據狀態中
        console.log('外層', val)
        this.showc = val;//更改外部屬性
      }
    },
    components:{
      "my-child":{
        template:'#isChild',
        props:['myName','myAge','isShow'],
        data:function(){
          return {
            show:this.isShow//獲取外部傳入值
          }
        },
        methods:{
          change () {
            this.show = false;//點擊隱藏
          }
        },
        watch:{
          isShow(val) {//監控外部傳入屬性變動後修改內部屬性
            this.show = val
          },
          show(val) {//子組件內屬性變動後向外部發送事件通知
            console.log(val,'內部')
            this.$emit("on-show-change",val);
          }
        }
      }
    }
  })

參考如何在Vue2中實現組件props雙向綁定