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

目录
  • vue 双向绑定问题$emit无效
    • 父组件
    • 子组件
  • vue双向绑定指令
    • 功能
    • 效果展示

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>

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

赞 (0)

相关推荐

  • Vue数据双向绑定的实现方式讲解

    Vue数据双向绑定的实现方式讲解

    目录 前言 一.input和textarea 二.radio和CheckBox 三.select 四.双向绑定的修饰符 前言 在web开发应用中,很多项目都会用到表格一列的组件进行数据的传输.获取和提交,在开发使用中,表格类组件数据的传输,我们一般可以使用v-model将输入的数据同步到data属性中,这个指令可以为不同的输入元素使用不同的属性,这个指令一般在form表单中的input等等元素上面来创建双向的数据绑定. 一.input和textarea 在vue实战项目中,vue里面的data属

  • vue中如何解除数据之间的双向绑定

    vue中如何解除数据之间的双向绑定

    目录 如何解除数据之间的双向绑定 问题 结论 vue双向绑定2.0和3.0区别 vue2.0实现双向绑定 vue3.0实现双向绑定 vue2.0和Vue3.0双向绑定的区别 观察者模式和发布者订阅者模式的区别 如何解除数据之间的双向绑定 问题 在开发过程中,我想要的结果是,一个表格和数据data数组绑定,将data中的数据依次遍历渲染到表格. 而data的数据是通过另一个this.formValidate 来push,代码如下 this.formValidate.BookISBN = res.d

  • 关于vue双向绑定带来的问题及解决

    关于vue双向绑定带来的问题及解决

    目录 vue双向绑定带来的问题 问题场景 解决方案 vue双向绑定的原理总结 MVVM vue当中的双向绑定 vue双向绑定带来的问题 问题场景 查询完表格数据后 通过作用域插槽,将该行数据传到修改页面(定义了个新对象存储数据),但是由于数据双向绑定,修改这个新对象的值,会影响到最初查询表格获取的值 如下 this.editForm = row 解决方案 方法1:通过json之间的解析,深拷贝创建一个与row无绑定关联的临时对象,再赋值给editForm this.editForm = JSON

  • vue数组双向绑定问题及$set用法说明

    目录 vue数组双向绑定问题及$set用法 以下这几种情况,Vue都会检测不到数据的变化 数组实现响应式的七个方法 $set用法 vue中$set解决数据双向绑定 vue数组双向绑定问题及$set用法 在vue开发中,我们有时会遇到数据更新视图不更新问题,地址没有改变,vue就监测不到数据变化.这个时候,双向绑定就失效了. 以下这几种情况,Vue都会检测不到数据的变化 当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,

  • vue3自定义组件之v-model实现父子组件双向绑定

    vue3自定义组件之v-model实现父子组件双向绑定

    vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: {      prop: 'value', //3.x默认值改为了modelValue      event: 'input' //3.x默认值改为了update:modelValue    }, //使用 this.$emit('input', index); vue3.x采用以下方式(v-model默认对应的

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

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

    目录 vue 双向绑定问题$emit无效 父组件 子组件 vue双向绑定指令 功能 效果展示 vue 双向绑定问题$emit无效 父组件变量传给子组件,子组件$emit 触发父组件的方法修改父组件的变量,但是父组件的值变了,子组件的值没有改变 父组件 <div>     // 子组件     <son :status.sync="status"/> </div> <script> export default {     data(){

  • vue element-ui 绑定@keyup事件无效的解决方法

    解决办法: <el-input v-model="searchParmas.gameName" placeholder="游戏名称" class="w120" @keyup.native="getGameList(searchParmas.gameName)"></el-input> 加上.native覆盖原有封装的keyup事件即可. 以上这篇vue element-ui 绑定@keyup事件无效的解

  • 解决VUE双向绑定失效的问题

    双向绑定失效的原因有很多. lz就说最近遇到的. 是的,单价下的那个输入框我用了双向绑定(比如叫price,比如100).然后ipnut 键入中文时,(即使我做了输入验证).回车时虽然框中不会保留中文,但事实上VUE的双向绑定已经失效了.不管你后面输入什么,绑定的price保存的值只会是中文前的那个值(100). 这样就导致 表面好像没事,但是当你提交时就数据不对了. 还有一种是. 是日期控件(bootstrap的)的问题,部分控件才会.mmp哦,当lz用这个空间选定日期时.以为美滋滋的一次搞定

  • vue双向绑定的简单实现

    vue双向绑定的简单实现

    研究了一下vue双向绑定的原理,所以简单记录一下,以下例子只是简单实现,还请大家不要吐槽~ 之前也了解过vue是通过数据劫持+订阅发布模式来实现MVVM的双向绑定的,但一直没仔细研究,这次深入学习了一下,借此机会分享给大家. 首先先将流程图给大家看一下 参考文章:Vue.js双向绑定的实现原理 我虽然参考的是这篇文章,下面的代码也是在阅读几遍后仿造的,自己只是简单添加了个递归实现所有dom子节点的双向绑定,以及添加了一些理解,但真正让我了然于心,让我可以独立写出2遍完整逻辑的其实是这张图,所以个

  • vue双向绑定及观察者模式详解

    vue双向绑定及观察者模式详解

    在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value

  • vue双向绑定数据限制长度的方法

    vue双向绑定数据如何限制长度?具体方法请阅读文章 问题描述 vue中输入框v-modle 双向绑定的数据:在需要的业务场景下需要对其进行字数长度限制: 解决方案 可以使用以下方法: 方法一: //方法一:输入框添加keypress方法:然后函数为: maxLength(attr,length){ let keyCode = event.keyCode; console.log("keyCode"); let len=0; console.log(this[attr].length);

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • Vue双向绑定实现原理与方法详解

    本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入

  • 在vue中使用console.log无效的解决

    webpack开发环境下,在vue中使用console.log无效,一直以为webpack出了问题. 使用window.console.log()就能够顺利在浏览器控制台输出了. 以及 在axios请求的回调中依旧无法输出使用window.console.log()/console.log(),先留坑吧. 补充知识:vue中 :style 与 :class 三元运算符使用 style三元表达式 <p :style="{'color': (checkIndex3==m.txt ? '#3d8

随机推荐