VUE父组件与子组件的数据传递

父组件与子组件

侦听 watch

引用基本数据类型：引用的是地址（地址里面存放值）

基本数据类型：引用的是值（每一个值所对应的地址是不一样的）

侦听的本质是：侦听地址是否发生改变

watch: {// 侦听基本数据类型value: function() {console.log("侦听到基本数据类型")},// 侦听引用数据类型obj: function() {console.log("侦听到引用数据类型")},
}

初始化前（父组件传值给子组件）是不触发的。

原因是：初始化时，是将子组件中变量（基本数据类型，引用数据类型）指针指向数据的地址

解决方法：后面内容有解决方法

渲染完毕后，修改数据时，是否监听到得分两种情况：基本数据类型、引用数据类型

但只要知道侦听的本质（地址是否发生改变），就能分清子组件的侦听器是否侦听到

注意点：在 vue项目中，父组件与子组件之间数据的传递：必须遵循一个规则：指向的地址必须一致，值可以任意。

因此，在子组件中一旦修改基本数据类型时，程序会报错（地址发生改变）。修改引用数据类型（obj.name）时，值改变，但地址是不改变的。

此时，如果按照上面的代码：value 是可以侦听到的（地址发生改变），obj不可以侦听到（地址不发生改变）

引用数据类型要想侦听到，针对上面的例子，obj 要改成 obj.name 就能监听到

正因为：指向的地址必须一致，值可以任意

（1）子组件尝试修改父组件传递过来的数据obj.name时，能够修改，但会影响到父组件中传递过来的数据（父组件和子组件指向的地址是一致的，值发生改变）

（2）子组件尝试修改父组件传递过来的数据时（每一个值所对应的地址是不一样的），会报错（违反了父组件与子组件之间数据的传递：必须遵循一个规则：指向的地址必须一致，值可以任意）

解决子组件修改基本数据类型时


props: {value: String,
}
data:() {return {v1: this.value}
}
watch: {v1: function() {this.v1 = "修改基本数据类型"console.log("不报错", this.v1)}
}

这种方法，可以修改数据，并且不会影响到父组件。但还是无法解决初始化是不能执行

解决子组件初始化时，侦听器无法触发的问题

watch: {value: {handler: function () {console.log("侦听到基本数据类型");},immediate: true, },obj: {handler: function () {console.log("侦听到引用数据类型");},immediate: true,},
}

immediate: true 初始化就执行（created阶段）

生命周期

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

VUE父组件与子组件的数据传递相关推荐

父窗口与子窗口的数据传递问题
曾经有那么一道题目是关于父窗口与子窗口的数据传递问题.我当时只知道父窗口向子窗口传递数据.不知道子窗口怎么向父窗口传递数据.今天终于把这个问题解决了,呵呵,记录一下: 我权且把原始窗口叫父窗口,把从该 ...
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父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...
vue 传递多行数据_vue父组件向子组件传递多个数据的实例
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个字符串第二种:动态数据传递:绑定一个 ...
Vue之父组件向子组件传递数据
1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App.vue中注册Child ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
vue父组件变量传递子组件_Vue.js 父组件向子组件传递数据通过 props
我的使用场景:父组件:home.vue 子组件:feed-section.vue 父组件 home.vue 通过请求拿到数据后,传递给子组件 feed-section.vue:因为在子组件中需要渲染 ...

VUE父组件与子组件的数据传递

父组件与子组件

侦听 watch

生命周期

VUE父组件与子组件的数据传递相关推荐

最新文章

热门文章