<template> <div> {{fatherText}} <Child v-model="fatherText"></Child>//調用子組件，并將 fatherText傳遞給子組件 <button @click="changeChild">changeChildButton</button> </div></template><script>import Child from "./Child.vue";export default { name: "father", data() { return { fatherText: "i'm fathertext" }; }, components: { Child }, methods: { changeChild() { this.fatherText = "father change the text"; } }};</script>

<template> <div> <p class="child" @click="change">{{fatherText}}</p>//正常使用fatherText的值，并添加一個修改值 的方法 </div></template><script>export default { name: "child", model: {//添加了model方法，用于接收v-model傳遞的參數 prop: "fatherText", //父組件中變量的傳遞 event: "changeChild" //事件傳遞 }, props: { fatherText: {//正常使用props接收fatherText的值 type: String } }, data() { return {  }; }, methods: { change(){  this.fatherText = 'son change the text' } }};</script>

<template> <div> <p class="child" @click="change">{{childText}}</p> </div></template><script>export default { name: "child", model: { prop: "fatherText", //父組件中變量的傳遞 event: "changeChild" //事件傳遞 }, props: { fatherText: { type: String } }, data() { return { childText: this.fatherText //定義自己的變量childText }; }, methods: { change() { this.childText = "son change the test";//修改自己的變量 } }};

<template> <div> <p class="child" @click="changeChild">{{childText}}</p> </div></template><script>export default { name: "child", model: { prop: "fatherText", //父組件中變量的傳遞 event: "changeChild" //事件傳遞 }, props: { fatherText: { type: String } }, data() { return { childText: this.fatherText }; }, methods: { changeChild() { this.childText = "son change the test"; } }, watch: { fatherText(newtext) {//使用父組件中變量名為函數名，監聽fatherText的變化，如果變化，則改變子組件中的值 this.childText = newtext; }, childText(newtext) {//監聽子組件中childText變化，如果變化，則通知父組件，進行更新 this.$emit("changeChild", newtext); } }};