vue 雙向繫結問題$emit無效的解決

2022-09-26 14:02:25

vue 雙向繫結問題$emit無效

父元件變數傳給子元件，子元件$emit 觸發父元件的方法修改父元件的變數，但是父元件的值變了，子元件的值沒有改變

父元件

<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>

存在上面問題，$emit 觸發後值還是沒有變化的

原因： $emit傳給父元件後，不能立馬傳給子元件，這中間存在一個非同步的問題，所以加一個setTimeout為0，解決這個非同步問題

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

vue雙向繫結指令

雙向繫結指令：

v-model:雙向繫結，既有資料來源到頁面，也有頁面到資料來源，在不操作DOM的前提下，快速獲取表單的資料(v-bind是單向繫結，只有資料來源到頁面）

功能

使用者輸入的資料更改後，資料來源的資料自動更改；
資料來源的資料更改後，使用者介面的資料也更改。

效果展示

程式碼如下：

<!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="">請選擇</option>
            <option value="1">浙江</option>
            <option value="2">江西</option>
        </select>
    </div>
 
    <!-- 匯入vue的庫檔案 -->
    <script src="./lib/vue-2.6.12.js"></script>
    
    <!-- 建立vue的範例物件 -->
    <script>
        const vm = new Vue({
            // 表示當前vm範例要控制頁面上的哪個區域，接收的值是一個選擇器
            el: '#app',
            // data物件就是要渲染到頁面上的資料
            data: {
                username: 'xfds',
                text: '123',
                city: ''
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue 雙向繫結問題$emit無效的解決

目錄

vue 雙向繫結問題$emit無效

父元件

子元件

vue雙向繫結指令

功能

效果展示

熱門文章