快捷導(dǎo)航

vue?雙向綁定問(wèn)題$emit無(wú)效的解決

更新時(shí)間：2022年09月24日 08:42:31 作者：lt要努力

這篇文章主要介紹了vue?雙向綁定問(wèn)題$emit無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue 雙向綁定問(wèn)題$emit無(wú)效

父組件變量傳給子組件，子組件$emit 觸發(fā)父組件的方法修改父組件的變量，但是父組件的值變了，子組件的值沒(méi)有改變

父組件

<div>
?? ?// 子組件
?? ?<son :status.sync="status"/>
</div>
<script>
export default {
?? ?data(){
?? ??? ?return{
?? ??? ??? ?status:false
?? ??? ?}
?? ?}
}
</script>

子組件

<div @click="change"></div>
<script>
export default {
props:{
?? ?status: {
? ? ? type: Boolean,
? ? ? default: false
? ? }
}
methods:{
?? ?change(){
?? ??? ?console.log(this.status, 1) ?// false
?? ??? ?this.$emit('update:status', true)
?? ??? ?console.log(this.status, 2) ?// false
?? ?}
}
}
</script>

存在上面問(wèn)題，$emit 觸發(fā)后值還是沒(méi)有變化的

原因： $emit傳給父組件后，不能立馬傳給子組件，這中間存在一個(gè)異步的問(wèn)題，所以加一個(gè)setTimeout為0，解決這個(gè)異步問(wèn)題

?? ?change(){
?? ??? ?console.log(this.status, 1) ?// false
?? ??? ?this.$emit('update:status', true)
?? ??? ?setTimeout(() => {
? ? ? ??? ??? ?console.log(this.status, 2) ?// true
? ? ??? ?}, 0)
?? ?}

vue雙向綁定指令

雙向綁定指令：

v-model:雙向綁定，既有數(shù)據(jù)源到頁(yè)面，也有頁(yè)面到數(shù)據(jù)源，在不操作DOM的前提下，快速獲取表單的數(shù)據(jù)(v-bind是單向綁定，只有數(shù)據(jù)源到頁(yè)面）

功能

用戶輸入的數(shù)據(jù)更改后，數(shù)據(jù)源的數(shù)據(jù)自動(dòng)更改；
數(shù)據(jù)源的數(shù)據(jù)更改后，用戶界面的數(shù)據(jù)也更改。

效果展示

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
</head>
<body>
    <div id="app">
        <!-- input輸入框 -->
        <p>用戶的名字是：{{ username }}</p>
        <input type="text" v-model="username">
        <hr>
        <!-- textarea -->
        <textarea v-model="text" name="" id="" cols="30" rows="10"></textarea>
        <!-- select下拉框 -->
        <select v-model="city" name="" id="">
            <option value="">請(qǐng)選擇</option>
            <option value="1">浙江</option>
            <option value="2">江西</option>
        </select>
    </div>
 
    <!-- 導(dǎo)入vue的庫(kù)文件 -->
    <script src="./lib/vue-2.6.12.js"></script>
    
    <!-- 創(chuàng)建vue的實(shí)例對(duì)象 -->
    <script>
        const vm = new Vue({
            // 表示當(dāng)前vm實(shí)例要控制頁(yè)面上的哪個(gè)區(qū)域，接收的值是一個(gè)選擇器
            el: '#app',
            // data對(duì)象就是要渲染到頁(yè)面上的數(shù)據(jù)
            data: {
                username: 'xfds',
                text: '123',
                city: ''
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: