在进行父子组件传值时,用到子组件直接控制父组件中的变量值以及在vue中直接更改对象或者数组的值,视图未发生变化的解决办法,当时完成项目时,一直未找到原因,修改了好久。
1.父子组件传值双向绑定
在传递给子组件中的变量上使用.sync修饰符,就能够实现父子传值的双向绑定
<!-- 父组件 --> <template> <div class="audioCate"> <child :show.sync="showModel" @closeModel="handleCloseModel"></child> </div> </template> <script> import child from './child' export default{ components: { child, } data() { return { showModel: false } }, methods: { handleCloseModel() { this.showModel = false; } } } </script> <!-- 子组件 --> <template> <div class="cate" @click="handleClick"> <div></div> </div> </template> <script> export default{ props: { show: Boolean, }, data() { return { showModel: false } }, methods: { handleClick() { /* 直接更新父组件中的showModel值 */ this.$emit('update:show', false); /* 或者调用父组件中的方法对showModel进行更改 */ /* this.$emit('closeModel'); */ } } } </script>
2.修改对象或数组中的键,视图未发生变化
使用$set方法进行修改,官方文档中也有说明
当时我是直接对数组中的值进行修改,但是视图没有发生变化
<script> export default{ data() { return { item: { title: '222' }, options: [11, 22], list: [ { title: '2222' } ] } }, created() { /* 对于对象,第一个为要修改的对象,第二个参数为对象的键,第三个为要修改的键对应的值 */ this.$set(this.item, 'title', '2200'); /* 对于对象,第一个为要修改的数组,第二个参数为数组索引,第三个为要修改的索引对应的值 */ this.$set(this.options, 0, 33); /* 对于数组里包含对象,可以利用循环对其进行修改 */ this.list.forEach(item => { this.$set(item, '_disableExpand', true); }); /* 对于数组里包含对象,也可以利用Object.assign对其进行修改 */ this.list[0] = Object.assign({}, this.list[0], { num: 10 }); this.$set(this.list, 0, this.list[0]); }, } </script>
也可以直接进行修改后对页面进行强制刷新,使用$forceUpdate()方法
this.options[0] = 100; this.$forceUpdate();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍详解Vue双向数据绑定原理解析,包括了详解Vue双向数据绑定原理解析的使用技巧和注意事项,需要的朋友参考一下 基本原理 Vue.采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter和getter,数据变动时发布消息给订阅者,触发相应函数的回调。 思路整理 要实现mvvm的双向绑定,需要实现如下几点: 1.实现一个数据
1. 前言 本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单 我们可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 2. 慕课解释 用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选
本文向大家介绍Vue使用.sync 实现父子组件的双向绑定数据问题,包括了Vue使用.sync 实现父子组件的双向绑定数据问题的使用技巧和注意事项,需要的朋友参考一下 1.前言 最近在vue 项目中有一个需求, 就是我需要根据不同的类型在页面中放不同的组件, 组件需要跟当前页面的数据进行双向绑定,如果都写在同一个页面 代码会显得比较多,毕竟我当前页面已经7-800行代码了 所以我需要把一些元素定义
本文向大家介绍Angular JS数据的双向绑定详解及实例,包括了Angular JS数据的双向绑定详解及实例的使用技巧和注意事项,需要的朋友参考一下 Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同。为此,记录了一些思考,给自己回顾,也供他人参考。 初步大致有以下几个方面: 数据双向绑定 视图模型的继
本文向大家介绍通过源码分析Vue的双向数据绑定详解,包括了通过源码分析Vue的双向数据绑定详解的使用技巧和注意事项,需要的朋友参考一下 前言 虽然工作中一直使用Vue作为基础库,但是对于其实现机理仅限于道听途说,这样对长期的技术发展很不利。所以最近攻读了其源码的一部分,先把双向数据绑定这一块的内容给整理一下,也算是一种学习的反刍。 本篇文章的Vue源码版本为v2.2.0开发版。 Vue源码的整体架
本文向大家介绍Vue实现双向数据绑定,包括了Vue实现双向数据绑定的使用技巧和注意事项,需要的朋友参考一下 Vue实现双向数据绑定的方式,具体内容如下 Vue是如何实现双向数据绑定的呢?答案是前端数据劫持。其通过Object.defineProperty()方法,这个方法可以设置getter和setter函数,在setter函数中,就可以监听到数据的变化,从而更新绑定的元素的值。 实现对象属性变化