详解vue中的父子传值双向绑定及数据更新问题

 更新时间:2019年06月13日 08:25:33   作者:ZJW0215  
这篇文章主要介绍了vue中的父子传值双向绑定及数据更新问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在进行父子组件传值时,用到子组件直接控制父组件中的变量值以及在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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • element如何初始化组件功能详解

    element如何初始化组件功能详解

    Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于element如何初始化组件功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Vue原理剖析 实现双向绑定MVVM

    Vue原理剖析 实现双向绑定MVVM

    这篇文章主要为大家剖析了Vue原理,实现双向绑定MVVM,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 如何解决d3.event在v7版本无效影响zoom拖拽缩放问题

    如何解决d3.event在v7版本无效影响zoom拖拽缩放问题

    这篇文章主要介绍了如何解决d3.event在v7版本无效影响zoom拖拽缩放问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • VUE+Express+MongoDB前后端分离实现一个便签墙

    VUE+Express+MongoDB前后端分离实现一个便签墙

    这篇文章主要介绍了VUE+Express+MongoDB前后端分离实现一个便签墙,需要的朋友可以参考下
    2021-04-04
  • Vue3使用echarts绘制仪表盘

    Vue3使用echarts绘制仪表盘

    这篇文章主要为大家学习介绍了Vue3如何使用echarts实现绘制仪表盘,文中的示例代码积极学习,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-07-07
  • Vue中利用better-scroll组件实现横向滚动功能

    Vue中利用better-scroll组件实现横向滚动功能

    横向滚动这个功能是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于Vue中如何利用better-scroll组件实现横向滚动的相关资料,需要的朋友可以参考下
    2021-06-06
  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,下面通过本文给大家介绍在vue项目中安装使用Mint-UI的方法,需要的朋友参考下吧
    2017-12-12
  • 在vue-cli项目中使用bootstrap的方法示例

    在vue-cli项目中使用bootstrap的方法示例

    本篇文章主要介绍了在vue-cli项目中使用bootstrap的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 基于Vue3和Plotly.js实现交互式3D图

    基于Vue3和Plotly.js实现交互式3D图

    这篇文章主要介绍了基于Vue3和Plotly.js实现交互式3D图,本代码旨在为数据可视化提供一个交互式图表,允许用户动态控制图表中线条的颜色和可见性,此功能对于探索大型数据集或突出特定数据子集非常有用,需要的朋友可以参考下
    2024-07-07
  • axios取消请求CancelToken的用法示例代码

    axios取消请求CancelToken的用法示例代码

    Axios提供了取消请求的功能,可以通过使用CancelToken来实现,这篇文章主要给大家介绍了关于axios取消请求CancelToken的用法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-10-10

最新评论