元件雙向綁定原理
元件之間的傳遞有很多種，而元件的雙向綁定使用到props及$emit的功能。
當我們想將「text」屬性進行雙向綁定，可以使用以下語法：
<component v-model:"text"></component>

Vue2的v-model是下面程式的簡寫：

<component 
v-bind:value="text"
v-on:input="newValue => text = newValue">
</component>

說明：
text為父元件的屬性，想用v-model將資料雙向綁定，父元件會用v-bind把text屬性值傳遞給子元件的value屬性，當子元件發生事件時，會用$emit送出input事件，並且把新的值傳給父元件，父元件則是使用v-on監聽input事件，當有事件發生時會更新最新成的資料。

而Vue3和Vue2的原理相同，但有兩個不同的地方，看看以下範例：

<component 
v-bind:model-value="text"
v-on:update:model-value="newValue => text = newValue">
</component>

分別是v-bind綁定的屬性是model-value以及$emit送出的事件是update:model-value

建立雙向綁定的方法

Vue2：

Vue.component('component',{
    props:['value'],
    template:`
        <input type="text" v-model="modelValue"/>
    `,
    computed:{
        modelValue:{
            get(){
                return this.value
            },
            set(value){
                this.$emit('input',value)
            }
        },
    },
});

說明：
設置了一個prop叫做'value'。這個prop將用於接收外部傳入的資料，並在元件內部使用。
template：使用input元素，並且綁定v-model指令。v-model指令用來實現雙向資料綁定，也就是說input元素的值將同步更新到元件內部的'modelValue' computed屬性上，同時也可以將元件內部的值更新到外部。

computed裡：

• getter函數返回'value' prop的值，這個意思是當元件初始化時，'modelValue'計算屬性將等於'value' prop的初始值，也就是modelValue 的初始值是來自父元件的 value prop 的值。。

• setter函數在input元素的值變更時被觸發。當input元素的值發生變化時，setter函數將新的值傳遞給'input'事件，使用this.$emit('input', value)觸發事件，以通知外部元件或父元件，'value' prop的值已經發生變化。

Vue3：

Vue.component('component',{
    props:['modelValue'],
    template:`
        <input v-model="value"/>
    `,
    computed:{
        value:{
            get(){
                return this.modelValue
            },
            set(value){
                this.$emit('update:modelValue',value)
            }
        },
    },
});

可對比Vue2和Vue3的不同處。