vue實現父子組件的雙向數據綁定

• vue組件之間能夠經過props實現父組件 -> 子組件的傳值方式。
• 子組件能夠經過$emit 回調函數傳給父組件值。

父子組件能夠經過sync修飾符來達到雙向綁定的效果。

content.vue

<template>
  <Container type="card-full">
    <template slot="header">
      用戶中心
    </template>
    doing...
  </Container>
</template>
<template>
  <div>
    <h1>父組件{{value1}}</h1>
      我是父組件的input<input  v-model="value1"/>
      <Child :name.sync="value1" />
      <Child :name.once="value1" />
      <Child :name="value1" />
      <Child2 :name='value1'/>
  </div>
  <!-- <Child v/> -->
</template>
<script>
import Child from './Child.vue'
import Child2 from './Child2.vue'
export default {
  data(){
    return {
      value1:"hello"
    }
  },
  components:{Child,Child2},
}
</script>

 

child.vue

<template>
  <div>子組件<input v-model='curName'></div>
</template>

<script>
export default {
    name: "box",
    data() {
        return {
            curName: this.name
        };
    },
    props: ["name"],
    watch: {
        name: function(newVal, oldVal) {
            this.curName = newVal;
        },
        curName: function(newVal, oldVal) {
            this.$emit("update:name", newVal);
        }
    }
};
</script>

經過上面方式實現雙向數據綁定會產生一下現象

　　子組件更新，父組件也更新，同時會影響其餘組件的數據。狀態變的不可控。