vue3如何實現變量雙向綁定

更新時間：2023年11月16日 08:36:55 作者：夢落飛雪

這篇文章主要介紹了vue3如何實現變量雙向綁定問題,具有很好的參考價值,希望對大家有所幫助,

vue3實現變量雙向綁定

vue2可以通過data、props、computed等鉤子綁定變量，vue3也有相似的方式，這里只說一下vue2中的data方式在vue3中的寫法

①通過reactive綁定

<templete>
    <div>{{value}}</div>
</templete>
<script lang="ts">
import { toRefs, reactive } from "vue";
export default{
    setup(){
        const data = reactive({
            value:''
        })
        return {
            ...toRefs(data)  //toRefs可以解構data中屬性，屬性也是雙向綁定的，這樣就不用綁定變量時嵌套data了
        }
    }
}
</script>

②通過ref綁定

<templete>
    <div>{{data}}</div>
</templete>
<script lang="ts">
import { onMounted, ref } from "vue";
 
export default{
    setup(){
        let data = ref('測試數據1')
        onMounted({
            data.value = '測試數據2'
        })
        return {
            data
        }
    }
}
</script>

vue3雙向數據綁定、setup 語法糖

組件雙向數據綁定

父組件修改值，子組件同步。子組件修改，父組件更新。

<template>
	<input type="text" v-module="name" @update:modelValue="onUpdateName($event)">
</template>

<script>
import { ref } from "vue";

export default {
    setup() {
        const name = ref("");
        
        const onUpdateName = (event) => {
            name.value = event;
        };
        
        return { name, onUpdateName };
    }
}
</script>

向子組件傳遞單個值，通過 props: ["modelValue"] 接收。

子組件改父組件數據時，使用 emit("update:modelValue", "新值") 進行修改。

向子組件傳遞多個值，通過 props: ["變量名"] 接收。

子組件改父組件數據時，使用 emit("update:變量名", "新值") 進行修改。

customRef

創(chuàng)建一個自定義的 ref 響應式數據，并對其依賴項跟蹤和更新觸發(fā)進行顯示控制。

實現防抖效果

<template>
	<input type="text" v-model="keyword" />
	<h1>{{ keyword }}</h1>
</template>

<script>
import { customRef } from "Vue";

export default {
    setup() {
        // 調用
        const keyword = myRef("hello", 500);
        
        return { keyword };
    },
};

// 防抖輸入框
function myRef (value, delay) {
    let timer = null;
    return customRef((track, trigger) => {
        return {
            // 讀取數據
            get() {
                // 通知vue跟蹤value的變化
                track();
                return value;
            },
            // 更新數據
            set(newValue) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    value = newValue;
                    // 通知vue去重新解析模板
                    trigger();
                }, delay);
            }
        };
    });
};
</script>

setup 語法糖

<script setup></script> 是一種編譯時語法糖，用于在單文件組件中使用組合式API。

代碼更簡潔，性能更強悍，更好的支持 TS。

<!-- 語法格式 -->
<script setup>
// 引入第三方，定義變量、方法等
</script>

defineProps

defineProps 用于接收父組件傳遞過來的值，可以直接使用無需導入。實質上就是一個 Props 對象。

<!-- 父組件 -->
<template>
	<!-- 1.給子組件傳參 -->
	<Test msg="hello world" />
</template>

<script setup>
import Test from '@/components/Test/Test.vue';
</script>

<!-- 子組件 -->
<template>
	<!-- 3.使用傳遞過來的值 -->
	{{ msg }}
</template>

<script setup>
    // 2.接收傳遞過來的 Props
    defineProps({
        msg: {
            type: String,	// 類型
            required: true,	// 是否必傳
        }
    });
    
    // 也可以使用變量接收，使用時要寫 props.msg
    // const props = defineProps({ msg: String })
</script>

defineEmits

自定義事件。

<!-- 子組件 -->
<template>
	<!-- 2.點擊觸發(fā) -->
	<button @click="$emit(delete)">點擊事件</button>
</template>

<script setup>
	// 1.自定義事件
    defineEmits(["delete"])
</script>

<!-- 父組件 -->
<template>
	<!-- 3.觸發(fā)父組件方法 -->
	<Test @delete="onDeleteHandler" />
</template>

<script setup>
import Test from '@/components/Test/Test.vue';

// 4.方法邏輯
const onDeleteHandler () => {
	console.log("deleted");
}
</script>

defineExpose

向組件外暴露數據。

<!-- 子組件 -->
<template>
	<button @click="$emit(delete)">點擊事件</button>
</template>

<script setup>
import { ref } from "vue";
const count = ref(0);

// 1. 導出暴露數據
defineExpose({ count });
</script>

<!-- 父組件 -->
<template>
	<!-- 3.ref接收數據 -->
	<Test ref="instance" />
	<button @click="log">獲取instance的值</button>
</template>

<script setup>
import Test from '@/components/Test/Test.vue';
import { ref } from "vue";

// 2. 定義變量接收
const instance = ref(null);

const log = () => {
    // 4.點擊按鈕獲取暴露的數據
	console.log(instance.value.count);
}
</script>