不同的组件之间的数据传值方法

父组件向子孙组件传值、通过方法provide / inject

（1）provide/inject的介绍： provide/ inject 是vue2.2.0新增的api ，这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代组件注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
（2）provide/inject的使用：

provide 提供变量：Object | () => Object
翻译过来的意思是：provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 注入变量：Array | { [key: string]: string | Symbol | Object }
翻译过来的意思是：一个字符串数组或一个对象，对象的 key 是本地的绑定名。

tips：
(1) inject注入变量中的 Symbol：是指独一无二的值。它是JavaScript语言的第七种数据类型。前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。

(2) 还有一点是：provide/inject的使用前提是：保证在同一个祖先组件的条件下向其所有子孙后代组件注入变量。

1、provide使用object提供变量还是使用() => Object 提供变量在不同的场景下使用：

父组件给子组件和孙子组件传值的使用情景

1：传的是一个直接在provide写死的数据的时候，可以使用object这个方法。

实现代码如下：
（1）父组件给子组件以及孙子组件传值的布局
首先定义一个：父组件，命名为：parentComponent.vue, 引入子组件firstComponent.vue

<template><div id="parentComponent">父组件<first-component>子组件</first-component></div>
</template>
<script>import firstComponent from "./components/firstComponent.vue" // 子组件export default {components: {firstComponent},data() {return {strVal: '****这个是provide传给里面的不同层级的子组件的值****'};},provide() {return {strVal: this.strValData, // 这个是传一个字符串给它生命周期内的子组件}}}
</script>

(2) 在第一个子组件使用inject来获取它的父组件的provide中的值
在子组件firstComponent.vue中引入一个子组件secondComponent.vue

  <template><div><second-component></second-component></div></template>
<script>
import secondComponent from "./components/secondComponent.vue" // 孙子组件
export default{components: {secondComponent},inject: ['strVal'], // 获取父组件provide中提供的变量: strValdata(){return {}},create(){console.log('第一个子组件拿到的值:', this.strVal)    // 结果将打印出这句话：第一个子组件拿到的值:这个是provide传给里面的不同层级的子组件的值}
}
</script>

(3) 同样的、在孙子组件使用inject来获取它的祖先组件provide中的值。
创建一个孙子组件secondComponent.vue

  <template><div></div></template><script>export default{inject: ['strVal'], // 获取祖先组件provide中提供的变量: strValdata(){return {}},create(){console.log('第一个子组件拿到的值:', this.strVal)  // 结果将打印出这句话：第一个子组件拿到的值: ****这个是provide传给里面的不同层级的子组件的值****}}
</script>

父组件给子组件和孙子组件传值的使用情景

2：传的是一个从接口获取到的数据或者在create或者mounted赋值的时候，可以使用()=>Object这个方法。

实现代码如下：
（1）父组件给子组件以及孙子组件传值的布局
首先定义一个：父组件，命名为：parentComponent.vue, 引入子组件firstComponent.vue

<template><div id="parentComponent">父组件<first-component>子组件</first-component></div>
</template>
<script>import firstComponent from "./components/firstComponent.vue" // 子组件export default {components: {firstComponent},data() {return {setData: {}};},provide() {return {setDataFn: this._setDataFn}},create(){this.setData = {a: '1',b: '2'}console.log('根组件', this._setDataFn())},methods: {_setDataFn(){return this.setData}}}
</script>

(2) 在第一个子组件中使用inject来获取它的父组件的provide中的值
在子组件firstComponent.vue中引入一个子组件secondComponent.vue

<template><div><second-component></second-component></div>
</template>
<script>import secondComponent from "./components/secondComponent.vue" // 孙子组件export default{components: {secondComponent},inject: ['setDataFn'], // 获取父组件provide中提供的变量: setDataFndata(){return {}},create(){console.log('第一个子组件拿到的值:', this.setDataFn())// 如果在这个子组件中修改这个方法内的值，则会将父组件的provide中的属性值也一起改变例如：let res = this.setDataFn()res.a = '999'结果：在父组件中打印的this.setDataFn()得到的是一个对象：{a: '999',b: '2'}}}
</script>

(3) 同样的、在孙子组件使用inject来获取它的祖先组件provide中的值。
创建一个孙子组件secondComponent.vue

 <template><div></div></template><script>export default{inject: ['setDataFn'], // 获取祖先组件provide中提供的变量: setDataFndata(){return {}},create(){console.log('孙子组件拿到的值:', this.setDataFn()) // 这个得到的也是被这个孙子组件的父组件更改的数据// 如果在这个孙子子组件中修改这个方法内的值，则会将父组件的provide中的属性值也一起改变例如：let res = this.setDataFn()res.a = '999'结果：在孙子组件中打印的this.setDataFn()得到的是一个对象：{a: '999',b: '2'}}}
</script>

provide/inject总结

优点：
可以轻松实现跨级访问祖先组件的数据、可以在该祖先组件下的任意层子组件中inject注入变量、都可以快速的获取到provide提供的变量、对使用组件封装之后的传值比较方便快捷。

缺点：
由于在任意层级子组件中都能访问根组件的数据、这就很容易导致数据追踪比较困难，无法马上具体的指定是那个组件使用了，因此这个属性通常并不建议使用。能用vuex的使用vuex，不能用的就多传参几层。但是在做组件库开发时，不对vuex进行依赖，且不知道用户使用环境的情况下可以很好的使用。

2: 父组件向子组件传值、通过方法props

（1）props的介绍：

父组件传值给子组件有四个步骤：父组件的data中定义值，引入并调用子组件，在引用的子组件的标签上通过v-bind指令给子组件传值，子组件通过在data中定义的props属性接收父组件传过来的值然后应用到子组件里。

注意:
props 是单向绑定的，只可以从上一级组件传递到下一级组件（父子组件）当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件五一修改父组件的状态

props属性接收父组件传过来的值类型：
例如:

props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}}

（2）props的使用：

实现方式一：父组件向子组件传值。不管传的是数组或者是对象给子组件、可以用v-bind:xxx=“xxx” 这个写法

下面是具体的代码实现父组件向子组件传值的写法：
首先、新建一个父组件 mainPage.vue

<template><div class="content-page"><my-dialog :propsData="propsData"></my-dialog></div>
</template>
<script>import myDialog from "components/myDialog.vue" // 父组件内引入子组件export default {data () {return {propsData: [] // 在父组件定义这个变量}},components: {myDialog},create() {this.propsData = [{a: '1',b: '2'},{a: '3',b: '4'}]}}
</script>

然后、新建一个子组件并在该组件中使用用props接收父组件的值。该组件的具体代码如下：

这个是子组件 myDialog.vue

<template><div>{{propsData}}</div>
</template>
<script>
export default {data() {return {}},props: ['propsData'], // 用props接收父组件传过来的数据 props:['父组件自定义的属性名']create(){console.log("this.propsData", this.propsData)}
}
</script>

这样就实现了父组件通过props方法向子组件传值。

实现方式二：父组件向孙子组件传值。实现的思路: 父组件的值先传给子组件、然后通过props方法、子组件再将从父组件获取的数据传给它的子组件(即孙子组件)。

具体的代码实现如下：
首先、新建一个父组件 mainPage.vue

<template><div class="content-page"><my-dialog :strData="strData"></my-dialog></div>
</template>
<script>import myDialog from "components/myDialog.vue" // 父组件内引入子组件export default {data () {return {strData: '这个是要传给子组件的值' // 父组件这一步不能少。不然传过去的值会出现问题。}}}
</script>

然后、再新建一个该父组件下的子组件 myDialog.vue

<template><div :strData="strData">{{strData}}</div>
</template>
<script>
export default {props: ['strData']
}
</script>

最后创建一个孙子组件 sonDialog.vue

<template><div>{{strData}}</div>
</template>
<script>
export default {data() {return {}},props: ['strData'],create(){console.log(this.strData)}
}
</script>

这样就可以将父组件的值通过一层层的传给了孙子组件。一般两三层的组件之间进行传值可以使用这个方法。如果中间隔了太多层的组件、则不建议使用props传值、可以考虑使用provide/inject、或者vuex公共数据或者状态的管理。

3: 子组件向父组件传值、通过方法$emit

$emit的介绍：由于prop是单向绑定的、当父组件的属性变化时，将传给子组件，但是不会反过来。

但是在正常的业务代码中、有时候会出现改变子组件的某个值、要能动态的更改父组件中的某些值。那么改怎样在子组件中修改父组件的data中变量呢？这就需要在子组件通过调用this.$emit方法来绑定一个自定义事件去通知父组件自己修改自己的数据。

(2)$emit的使用：

实现方式一：子组件向父组件传值。第一个写法：父组件传值使用修饰符xxx.sync, 在子组件中用`$emit('update:xxx', 要传的值)`、实现的代码如下所示:

(1)首先、新创建一个父组件 parentComp.vue

<template><child-comp :xxx.sync="xxx" />
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {xxx: true // 父组件给子组件传值，需要在data中定义一个变量}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div><button @click="changeParentDataFn">点击更新父组件的某个数据</button></div>
</template>
<script>export default {data () {return {}},props: ['xxx'], // 父组件传给子组件的数据methods: {changeParentDataFn(){this.$emit('update:xxx', false)}}}
</script>

这样就实现了由子组件传值给父组件的其中一种方法。

实现方式二：子组件向父组件传值。第二个写法：父组件传值使用正常的写法 @xxx=‘xxx’，在子组件中用$emit(‘xxx’，要传的值)、实现的代码如下所示:

(1)首先、新创建一个父组件 parentComp.vue

<template><child-comp @xxx="xxxFn" />
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {}},methods: {xxxFn(val){console.log('获取从子组件传回给父组件的数据',val)}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div><button @click="changeParentDataFn">点击更新父组件的某个数据</button></div>
</template>
<script>export default {data () {return {}},props: ['xxx'], // 父组件传给子组件的数据methods: {changeParentDataFn(){this.$emit('xxx', false)}}}
</script>

这样就实现了由子组件传值给父组件的第二种方法。

  //（1）使用.sync的时候this.$emit('update:father-num',100);  //无效this.$emit('update:fatherNum',100); //有效

所以、建议都以驼峰形式命名为佳。

4.父组件获取子组件的数据或者所有方法、使用$children 来访问子组件

（1） $children 的官方介绍：

当前实例的直接子组件、需要注意 $children 并不保证顺序，也不是响应式的,返回的是一个数组.这个方法一般是在应急的时候才用的、它可以获取得到该父组件下的所有子组件的所有方法和数据。不管是第几层子组件，都可以通过 c h i l d r e n 方法拿到它的子组件的数据和方法、可以访问到子组件上所有的 d a t a ( ) 里的数据信息和生命周期方法， m e t h o d s 里的方法。不过获取父子组件的数据的时候、还是推荐使用 p r o p s / children方法拿到它的子组件的数据和方法、可以访问到子组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }。不过获取父子组件的数据的时候、还是推荐使用props/ children方法拿到它的子组件的数据和方法、可以访问到子组件上所有的data()里的数据信息和生命周期方法，methods里的方法。不过获取父子组件的数据的时候、还是推荐使用props/emit方法、这样能确定的知道数据来自那个组件。

（2） $children 的使用：

实现方式一：父组件获取子组件、使用$children方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template><child-comp /><button @click="getChildAllData">获取子组件的数据和方法</button>
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {}},methods: {getChildAllData(){// 得到的是一个无序的数组,唯一的标识就是里面的_uid属性let childAll = this.$children[0]console.log(childAll)// 结果；可以在里面找到子组件定义的方法并可以调用。}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div></div>
</template>
<script>export default {data () {return {childMsg: '这个是子组件才有的数据'}},methods: {childUniqueFn(){return '这个是子组件的方法'}}}
</script>

5.父组件获取孙子组件的数据或者所有方法、也可以使用$children 来访问孙子组件

实现方式一：父组件获取孙子组件、也可以使用$children方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template><child-comp /><button @click="getChildAllData">获取子组件的数据和方法</button>
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {}},methods: {getChildAllData(){// 得到的是一个无序的数组,唯一的标识就是里面的_uid属性,// 但是也没法确定具体的组件是那个，需要点击进去查看对应的方法或者数据let childAll = this.$children // 这样可以找到子组件的方法和数据let childAll2 = this.$children[0] // 这样可以找到孙子组件的方法和数据}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div><son-comp></son-comp></div>
</template>
<script>export default {data () {return {childMsg: '这个是子组件才有的数据'}},methods: {childUniqueFn(){return '这个是子组件的方法'}}}</script>

(3) 然后再创建一个子组件 sonComp.vue

<template><div></div>
</template>
<script>export default {data () {return {sondMsg: '这个是孙子组件才有的数据'}},methods: {sonUniqueFn(){return '这个是孙子组件才有的数据'}}}
</script>

6.子组件获取父组件的数据或者所有方法、使用$parent

（1） $parent 的官方介绍：

$parent用来访问父组件实例，通常父组件都是唯一确定的。可以访问到父组件上所有的 data(){ 里的数据信息和生命周期方法，methods里的方法 }。

（2） $parent 的使用：

实现方式一：子组件获取父组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template><div><child-comp /></div>
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {parentMsg: '这个是父组件才有的数据'}},methods: {parentDataFn(){return '这个是父组件才有的方法'}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div><button @click="getParentDataFn">获取父组件数据或者方法</button></div>
</template>
<script>export default {data () {return {}},methods: {getParentDataFn(){let parentData = this.$parent // 这样可以直接拿到父组件的方法和data中的数据}}}
</script>

实现方式二：孙子组件获取祖先组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template><div><child-comp /></div>
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {parentMsg: '这个是父组件才有的数据'}},methods: {parentDataFn(){return '这个是父组件才有的方法'}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div><son-comp></son-comp></div>
</template>

（3）再创建一个孙子组件 sonComp.vue

<template><div><button @click="getRootDataFn">获取祖先组件的数据或者方法</button></div>
</template>
<script>export default {data(){return {}},methods: {getRootDataFn(){// 父组件度是只有一个的// 所以这样就可以一层层的往上获取祖先组件的方法或者数据了let dom = this.$parent.$parent.fn() }}}
</script>

7. 父组件获取子组件的方法或者数据、可以使用 ref / refs

（1） ref/refs的官方介绍：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

还有关于 ref 注册事件的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

（2） ref/refs的使用：

实现方式一：父组件获取子组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template><div><child-comp ref="getChildRef" /></div>
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {}},// 在dom节点加载完成之后操作mounted: {let comA = this.$refs.getChildRefconsole.log(comA.msg)conosle.log(comA.getDataFn())}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div></div>
</template>
<script>export default {data () {return {msg: '这个是用$refs来获取的'}},methods: {getDataFn(){return '这个是用$refs查找到该组件的方法来调用的'}}}
</script>

8.(这个未实现成功)子组件获取父组件的方法或者数据、可以使用 ref / refs

实现方式一：子组件获取父组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

(1)首先、新创建一个父组件 parentComp.vue

<template><div ref="parentCom"><child-comp /></div>
</template>
<script>import childComp from "components/childComp.vue" // 父组件内引入子组件export default {data () {return {parentMsgRef: '这个是父组件的data中的数据'}},methods: {parentFn(){return '这个是父组件方法返回的数据,能看到说明被子组件调用成功'}}}
</script>

(2) 然后再创建一个子组件 childComp.vue

<template><div></div>
</template>
<script>export default {data () {return {}},mounted(){let parentCom = this.$refs.parentCom}}
</script>

9.不同组件之间的传值，可以使用 localStorage 来实现不同组件之间的传值

（1）localStorage的官方介绍：

local(本地的) + storage(存储) == 本地存储的意思。 localstorage是window对象的API，作用是在本地浏览器内存中创建一个key：value的属性。而且 localStorage中一般浏览器支持的是5M大小，而每条cookie的存储空间只有4k大小。

通常有三种方法来创建localstorage ：

一： localStorage.key = value

二： localStorage[key] = value

三： localStorage.setItem(‘key’, ‘value’) // 目前用的最多的是这种写法

（2）localStorage的使用：localStorage的获取和存储

通过window.localStorage.getItem(key) 获取数据

通过window.localStorage.setItem(key,value)存储数据

注意用JSON.parse() / JSON.stringify()做数据格式转换

localStorage / sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

总结：因为localStorage的数据是存储在浏览器的内存中的，所以不同的组件可以随时的从localStorage中获取其他组件往里面存储的数据。这样也可以实现不同组件之间的数据交互。

优势：

localStorage拓展了cookie的4K限制

localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

局限性：

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换-- JSON.parse()

localStorage在浏览器的隐身模式下面是不可读取的 --目前浏览器都是可以开启隐身模式的

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

localStorage不能被爬虫抓取到 – 这个不知道会不会对网站的收录排名有影响???

10.非父子组件之间的传值，可以使用 sessionStorage 来实现不同组件之间的传值

（1）localStorage的官方介绍：

sessionStorage 是HTML5新增的一个会话存储对象，与localStorage类似，但是又有区别。用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据，而localStorage在页面关闭的时候是不会删除这些存储的数据的，除非人为的做了清空存储数据的操作或者调用了清空存储的方法。

sessionStorage 特点：这部分是网上摘要复制下来的，做一个知识点备份。

同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名，忽略协议（HTTP和HTTPS）和端口号的要求)
单标签页限制。sessionStorage操作限制在单个标签页中，在此标签页进行同源页面访问都可以共享sessionStorage数据。
只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能，seesionStorage的数据也会恢复)。
存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串，也会在存储时转换为字符串。true值会转换为"true")。
存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
目前兼容浏览器版本： IE8、Chrome 5 。

（2）seesionStorage的使用：与localStorage的获取和存储类似

通过 sessionStorage .getItem(key) 获取数据

通过 sessionStorage .setItem(key,value) 存储数据

注意： JSON.stringify()–存储是用 / JSON.parse()— 获取时候用

sessionStorage可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.

总结：因为sessionStorage的数据是存储在浏览器的内存中的，所以不同的组件可以随时的从sessionStorage中获取其他组件往里面存储的数据。这样也可以实现不同组件之间的数据交互。

11.兄弟组件之间的传值，可以使用 eventBus 来实现

（1）eventBus的官方介绍：

（2）eventBus的使用：

12.所有的组件之间的传值，可以使用 vuex 来实现

（1）vuex 的官方介绍：

eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以通知其他组件。但是当项目较大,就容易造成难以维护的问题。

（2）vuex 的使用：

13.跨级组件之间的传值，可以使用 $attrs 来实现

（1）$attrs的官方介绍：

（2）$attrs的使用：

1）父组件向子组件传值

14.跨级组件之间的传值，可以使用 $listeners 来实现

（1）$listeners 的官方介绍：

（2）$listeners 的使用：

【Vue组件传值】不同的组件之间的数据传值方法相关推荐

【无标题】Android在activity之间发送数据(putExtra方法)
Activity 之间发送数据(putExtra方法详解) 当应用创建 Intent 对象以在 startActivity(android.content.Intent) 中用于启动新的 Activi ...
【好文推荐】Activity之间的数据传递方法汇总
在Activity间传递的数据一般比较简单,但是有时候实际开发中也会传一些比较复杂的数据,本节一起来学习更多Activity间数据的传递方法. 1.通过 Intent 传递我们在进行 Activit ...
ansys与solidworks关联失败_SolidWorks与ANSYS之间的数据交换方法研究
引言 SolidWorks软件是世界上第1个基于Windows开发的三维CAD系统,其功能强大,用途广泛,是一款智能型高级CAD/CAE/CAM组合软件.ANSYS软件是集结构.流体.电场.磁场.声场 ...
服务器之间共享数据的方法
1,使用FTP共享数据在其中一台服务器上安装FTP服务器,使用另一台服务器上的FTP客户端连接到FTP服务器.使用FTP客户端在服务器之间传输数据 2,使用NFS共享数据在其中一台服务器安装NFS ...
Activity之间的数据传递方法汇总系列教学
近日一好友去阿里面试,面试失败了,分享了一个他最不擅长的算法面试题.题目是这样的. 题目:给定一个二叉搜索树(BST),找到树中第 K 小的节点. 出题人:阿里巴巴出题专家:文景/阿里云 CDN 资深 ...
多页面之间传递数据的方法
传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下, 一个稍微正式点的项目都不可能少了页面间传参,页面的跨越.服务器后台进行数据请求等,都需要一个或多个传参的方法. 那么参数在 ...
Vue第二天学习总结—— Vue全家桶之组件化开发(组件化开发思想、组件注册、Vue调试工具用法、组件间数据交互传递、组件插槽、基于组件的案例——购物车)
(一) 组件化开发思想 1. 现实中的组件化思想体现组件化即是对某些可以进行复用的功能进行封装的标准化工作标准:要想组件能够成功组合在一起,每个组件必须要有标准分治:将不同的功能封装到不同的组件 ...
Android应用程序组件Content Provider在应用程序之间共享数据的原理分析（1）
在Android系统中,不同的应用程序是不能直接读写对方的数据文件的,如果它们想共享数据的话,只能通过Content Provider组件来实现.那么,Content Provide ...
不同Activity之间传递数据--Bundle对象和startActivityForResult方法的实现
首先,由于Activity是Android四大组件之一,如果一个应用程序中包含不止一个Activity,则需要在AndroidManifest.xml文件中进行声明. 例如进行如下的声明(程序中包含两 ...

【Vue组件传值】不同的组件之间的数据传值方法

不同的组件之间的数据传值方法

父组件向子孙组件传值、通过方法provide / inject

1、provide使用object提供变量还是使用() => Object 提供变量在不同的场景下使用：

父组件给子组件和孙子组件传值的使用情景

父组件给子组件和孙子组件传值的使用情景

provide/inject总结

2: 父组件向子组件传值、通过方法props

实现方式一：父组件向子组件传值。不管传的是数组或者是对象给子组件、可以用v-bind:xxx=“xxx” 这个写法

实现方式二：父组件向孙子组件传值。实现的思路: 父组件的值先传给子组件、然后通过props方法、子组件再将从父组件获取的数据传给它的子组件(即孙子组件)。

3: 子组件向父组件传值、通过方法$emit

实现方式一：子组件向父组件传值。第一个写法：父组件传值使用修饰符xxx.sync, 在子组件中用`$emit('update:xxx', 要传的值)`、实现的代码如下所示:

实现方式二：子组件向父组件传值。第二个写法：父组件传值使用正常的写法 @xxx=‘xxx’，在子组件中用$emit(‘xxx’，要传的值)、实现的代码如下所示:

4.父组件获取子组件的数据或者所有方法、使用$children 来访问子组件

实现方式一：父组件获取子组件、使用$children方法来获取。具体的实现代码如下

5.父组件获取孙子组件的数据或者所有方法、也可以使用$children 来访问孙子组件

实现方式一：父组件获取孙子组件、也可以使用$children方法来获取。具体的实现代码如下

6.子组件获取父组件的数据或者所有方法、使用$parent

实现方式一：子组件获取父组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

实现方式二：孙子组件获取祖先组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

7. 父组件获取子组件的方法或者数据、可以使用 ref / refs

实现方式一：父组件获取子组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

8.(这个未实现成功)子组件获取父组件的方法或者数据、可以使用 ref / refs

实现方式一：子组件获取父组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

9.不同组件之间的传值，可以使用 localStorage 来实现不同组件之间的传值

（1）localStorage的官方介绍：

通常有三种方法来创建localstorage ：

（2）localStorage的使用：localStorage的获取和存储

10.非父子组件之间的传值，可以使用 sessionStorage 来实现不同组件之间的传值

11.兄弟组件之间的传值，可以使用 eventBus 来实现

12.所有的组件之间的传值，可以使用 vuex 来实现

13.跨级组件之间的传值，可以使用 $attrs 来实现

14.跨级组件之间的传值，可以使用 $listeners 来实现

【Vue组件传值】不同的组件之间的数据传值方法相关推荐

最新文章

热门文章

【Vue组件传值】不同的组件之间的数据传值方法

不同的组件之间的数据传值方法

父组件向子孙组件传值、通过方法provide / inject

1、provide使用object提供变量还是使用() => Object 提供变量在不同的场景下使用：

父组件给子组件和孙子组件传值的使用情景

父组件给子组件和孙子组件传值的使用情景

provide/inject总结

2: 父组件向子组件传值、通过方法props

实现方式一：父组件向子组件传值。不管传的是数组或者是对象给子组件、可以用v-bind:xxx=“xxx” 这个写法

实现方式二：父组件向孙子组件传值 。 实现的思路: 父组件的值先传给子组件、然后通过props方法、子组件再将从父组件获取的数据传给它的子组件(即孙子组件)。

3: 子组件向父组件传值、通过方法$emit

实现方式一： 子组件向父组件传值。第一个写法：父组件传值使用修饰符xxx.sync, 在子组件中用$emit('update:xxx', 要传的值)、实现的代码如下所示:

实现方式二： 子组件向父组件传值。第二个写法：父组件传值使用正常的写法 @xxx=‘xxx’， 在子组件中用$emit(‘xxx’， 要传的值)、实现的代码如下所示:

4.父组件获取子组件的数据或者所有方法、使用$children 来访问子组件

实现方式一：父组件获取子组件、使用$children方法来获取。具体的实现代码如下

5.父组件获取孙子组件的数据或者所有方法、也可以使用$children 来访问孙子组件

实现方式一：父组件获取孙子组件、也可以使用$children方法来获取。具体的实现代码如下

6.子组件获取父组件的数据或者所有方法、使用$parent

实现方式一：子组件获取父组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

实现方式二：孙子组件获取祖先组件数据或者方法、可以使用$parent 方法来获取。具体的实现代码如下

7. 父组件获取子组件的方法或者数据、可以使用 ref / refs

实现方式一：父组件获取子组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

8.(这个未实现成功)子组件获取父组件的方法或者数据、可以使用 ref / refs

实现方式一：子组件获取父组件数据或者方法、可以使用ref/refs方法来获取。具体的实现代码如下

9.不同组件之间的传值，可以使用 localStorage 来实现不同组件之间的传值

（1）localStorage的官方介绍：

通常有三种方法来创建localstorage ：

（2）localStorage的使用：localStorage的获取和存储

10.非父子组件之间的传值，可以使用 sessionStorage 来实现不同组件之间的传值

11.兄弟组件之间的传值，可以使用 eventBus 来实现

12.所有的组件之间的传值，可以使用 vuex 来实现

13.跨级组件之间的传值，可以使用 $attrs 来实现

14.跨级组件之间的传值，可以使用 $listeners 来实现

【Vue组件传值】不同的组件之间的数据传值方法相关推荐

最新文章

热门文章

实现方式二：父组件向孙子组件传值。实现的思路: 父组件的值先传给子组件、然后通过props方法、子组件再将从父组件获取的数据传给它的子组件(即孙子组件)。

实现方式一：子组件向父组件传值。第一个写法：父组件传值使用修饰符xxx.sync, 在子组件中用`$emit('update:xxx', 要传的值)`、实现的代码如下所示:

实现方式二：子组件向父组件传值。第二个写法：父组件传值使用正常的写法 @xxx=‘xxx’，在子组件中用$emit(‘xxx’，要传的值)、实现的代码如下所示: