您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 532人已围观

简介 vue 双向绑定问题$emit无效的解决_vue.js_

vue 双向绑定问题$emit无效

父组件变量传给子组件，子组件$emit 触发父组件的方法修改父组件的变量，但是父组件的值变了，子组件的值没有改变

父组件

     // 子组件     

子组件

存在上面问题，$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是单向绑定，只有数据源到页面）

功能

  • 用户输入的数据更改后，数据源的数据自动更改；
  • 数据源的数据更改后，用户界面的数据也更改。

效果展示

代码如下：

title
用户的名字是：{{ username }}

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

您可能感兴趣的文章:

上一篇：vue+element tree懒加载更新数据的示例代码_vue.js_

下一篇：关于vue双向绑定带来的问题及解决_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网