vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 双向绑定$emit无效

vue 双向绑定问题$emit无效的解决

作者:lt要努力

这篇文章主要介绍了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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文