Vue父组件传子组件数据中，Vue监听不到数据改变

官方文档说明（引用来自官网）
检测变化的注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对象：Vue 无法检测 property 的添加或移除。

数组：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

直接上代码，情况合并，看代码说明

对象

子组件：

<template><div>{{testArray_}}</div>
</template><script>
export default {props:{testArray:{type: Object,}},data(){return{testArray_ :{}}},watch:{testArray: {handler(newData){this.testArray_ = newData},immediate:true,deep: true}}
}
</script>

父组件：

<template><div><div>点击数值改变</div><button @click="handleSumbit">按钮</button><child :testArray="testArray"></child></div>
</template><script>
import Vue from 'vue'
import child from './child.vue'
export default {components: { child },data(){return{testArray: {name: 'll',sex: '女'}}},methods:{handleSumbit(){// 监听不到// this.testArray.like = "打游戏"// 监听到Vue.set(this.testArray, 'like', "打游戏")console.log(this.testArray);}}}
</script>

数组

子组件：

<template><div>{{testArray_}}{{testArray_.length}}</div>
</template><script>
export default {props:{testArray:{type: Array,}},data(){return{testArray_ :[]}},watch:{testArray: {handler(newData){this.testArray_ = newData},// 该回调将会在侦听开始之后被立即调用immediate:true,//该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深deep: true}}
}
</script>

父组件

<template><div><div>点击数值改变</div><button @click="handleSumbit">按钮</button><child :testArray="testArray"></child></div>
</template><script>
import Vue from 'vue'
import child from './child.vue'
export default {components: { child },data(){return{testArray: [1,2,3,4,5,6,7]}},methods:{handleSumbit(){// 可监听到改变//   this.testArray = this.testArray.map((ele) => {//       return ele+1//   })// 情况一// 监听不到// this.testArray[2] =100// 修改后可以监听到// 方法一Vue.set(this.testArray, 2,100)// 方法二//  this.testArray.splice(this.testArray, 1,100)// 情况二// 监听不到// this.testArray.length = 5// 可监听到// this.testArray.splice(5)console.log(this.testArray);}}}
</script>

Vue父组件传子组件数据中，Vue监听不到数据改变相关推荐

vue 父组件传子组件数值，父值变更子获取的值没有变的问题
1.父组件给子组件传值,子组件使用props接收值. //父组件 <div><Treeselect :value="editFormData.customerId" ...
vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组显示两个组件的信 ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
vue 父链和子组件索引_Vue.js 学习笔记第7章组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录在组件中获取数据二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
vue爬坑之父组件向子组件异步传参子组件中拿不到值的解决方法
做项目时候遇到一件怪事: 父组件向子组件<dialog-info/>传个参数arrdata,是个数组因为是Array类型的参数,子组件中进行了接收,并且default通过函数返回一个空数 ...
Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...

Vue父组件传子组件数据中，Vue监听不到数据改变

Vue父组件传子组件数据中，Vue监听不到数据改变

对象

子组件：

父组件：

数组

子组件：

父组件

Vue父组件传子组件数据中，Vue监听不到数据改变相关推荐

最新文章

热门文章