前言

父子通訊在vue的項(xiàng)目里面有提到過(guò)并且也有很細(xì)的解釋但是還是覺(jué)得有必要單獨(dú)寫一個(gè)

一蔬蕊、父組件向子組件傳遞數(shù)據(jù)

1.通過(guò)props進(jìn)行傳遞
2.子組件不應(yīng)該直接修改父組件傳遞過(guò)來(lái)的屬性

<template>
  <div>
    <!-- <Form title="添加電影"></Form> -->
    <Form :title="title"></Form>
  </div>
</template>

<script>
// 加載Form組件
import Form from "./components/Form";
export default {
  data() {
    return {
      title: "添加電影"
    };
  },
  // 注冊(cè)組件
  components: {
    Form
  }
};
</script>

<style>
</style>

// 子組件
<template>
  <div>
    <h3>{{title}} {{msg}}</h3>
    <p>
      <span>用戶名:</span>
      <input type="text">
    </p>
  </div>
</template>

<script>
export default {
  // 避免修改從父組件傳過(guò)來(lái)的屬性
  props: ["title"],
  data() {
    return {
      msg: "hahaha2"
    };
  },
  created() {
    console.log(this.title);
    console.log(this.msg);
    // this.title = "我是新標(biāo)題";
    this.msg = "xxxxxx";
  }
};
</script>

<style>
</style>

二辱匿、子組件向父組件傳遞數(shù)據(jù)

1.在父組件自定義事件getUsername,并綁定處理方法receiveUsername
2.在需要的時(shí)候,在子組件內(nèi)觸發(fā)父組件的自定義事件在父組件自定義事件getUsername并帶上數(shù)據(jù)
3.父組件自定義事件在父組件自定義事件getUsername被觸發(fā),對(duì)應(yīng)的處理方法并綁定處理方法receiveUsername被執(zhí)行,并接收到子組件傳過(guò)來(lái)的數(shù)據(jù)

// 父組件
<template>
  <div>
    <Form @getUsername="receiveUsername"></Form>
  </div>
</template>

<script>
// 加載Form組件
import Form from "./components/Form";
export default {
  data() {
    return {
      
    };
  },
  // 注冊(cè)組件
  components: {
    Form
  },

  methods: {
      // 接收子組件傳遞過(guò)來(lái)的用戶名
    receiveUsername(data) {
      console.log(data);
    }
  }
};
</script>

// 子組件
<template>
  <div style="border: 1px solid;">
    <p>
      <span>用戶名:</span>
      <input type="text" v-model="username">
      <button @click="submit">傳數(shù)據(jù)</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "胡儒清"
    };
  },
  created() {
    // 子組件觸發(fā)父組件的自定義事件 getUsername
    this.$emit("getUsername", this.username);
  },

  methods: {
    submit() {
      // 也可以通過(guò)點(diǎn)擊事件來(lái)觸發(fā)
      this.$emit("getUsername", this.username);
    }
  }
};
</script>

三、父子組件雙向綁定

父組件數(shù)據(jù)和自組件數(shù)據(jù)同步,利用了引用對(duì)象存儲(chǔ)特性

// 父組件
<template>
  <div>
    <p>這是父組件title的值 {{obj.title}}</p>
    <Form :obj="obj"></Form>
  </div>
</template>

<script>
import Form from "./components/Form";
export default {
  data() {
    return {
      obj: {
        title: "web前端攻城獅"
      }
    };
  },
  components: {
    Form
  }
};
</script>

// 子組件
<template>
  <div style="border: 1px solid;">
    這里是子組件
    <input type="text" v-model="obj.title">
  </div>
</template>

<script>
export default {
  props: ["obj"]
};
</script>