vue 雙向綁定問題$emit無效的解決
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>
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。