VUE组件之数据共享

vue中data数据的传递主要有以下几种情况：
1 在dom中直接调用父组件中的data数据
2 在子组件中调用父组件的data数据
3 在父组件中调用子组件的data数据
4 在孙子组件中调用子组件的数据
5 在子组件调用孙子组件的数据

一、在dom中直接调用父组件的数据

简单来说就是怎么取出父组件的data数据。
1 一般我们可以直接使用{{属性名}}的属性，代码如下：

<div id="test">{{favorite}}</div><script>var vm = new Vue({el:"#test",data:{favorite:"H5"}})</script>

界面打印效果：可以看出数据已经被渲染到dom中了

2、如果是绑定data数据，那么直接写属性名就行

<div id="test" v-bind:test='favorite'>

二、在子组件中调用父组件的data数据

这个时候我们需要借助组件的props属性了，该属性的值可以是一个数组，也可以是一个对象。如果是数组，数组中的内容是调用该组件绑定的数据名称（可以绑定任意多个）；如果是对象，可以对每一个绑定的数据类型等进行验证（这是另外一个话题了）；

在刚才代码的基础上我们增加一个组件，并在父组件中调用它，通过v-bind绑定一个父组件中data的favorite属性，然后我们在props组件中接收了这个值，并在它的模板中将其展示出来，先看效果：

从上图可以看出我们在子组件中已经可以调到父组件data中favorite的值了，代码如下：

    <div id="test" >{{favorite}}<good v-bind:test='favorite'></good></div><script type='text/template' id="good"><div id='good'>// 调用传过来的值{{test}}</div></script><script>// 定义一个组件Vue.component('good',{//props接收值，里面的‘test’ 要和上面传过来的数据的名称一致props:['test'],template:'#good'})var vm = new Vue({el:"#test",data:{favorite:"H5"}})</script>

三、在父组件中调用子组件的data数据
有时候我们需要将子组件的数据传给父组件使用，比如，我们想做一个单选按钮的组件，并且选择状态和数据保持同步状态

如何将组件中的值传到外面，这里我们需要用到事件的抛发 $emit(‘事件名称’，‘抛发的值’)，【事件名称自定义，要保证接收的和抛发的一致】，事件名称默认为input 值为value，当然了既然是默认，我们也可以根据具体情况去修改它，下面我们会以小梨子来说明具体怎么操作的。

效果展示：

小梨子：单选按钮效果
我们需要修改默认的事件（input）和 “值（value）”，通过组件的model属性来设置，然后绑定到props中，这个是为了接收外部传进来的初始值

主要代码：

组件修改model
model:{event:'change',prop:"checked"
},
props:{// test:String,checked:Boolean
},
抛发事件，接收事件
//抛发
<input type="checkbox" :checked='checked' @change="$emit('change',$event.target.checked)">
//接收
<good v-bind:test='favorite' @input="favorites" @change='changeCheck' :checked='finalChecked'></good>{{finalChecked}}

最终效果展示：

四、在孙子组件中调用子组件的数据

我们先要在子组件中嵌套一个组件，一般我们使用另外一个属性 components来处理这种组件嵌套。

在下面的代码中，我定义了两个组件，一个apple 一个orange，最终实现效果：在orange这个组件中调取apple的数据。效果图：

上代码：

首先利用components在根组件中嵌套apple，然后在apple中利用components嵌套orange，实现一个连通性，中间数据传递我们依然借用了props做媒介。

//根组件
var vm = new Vue({el:"#app",data:{favorite:'苹果'},components:{apple}
})
//apple组件
const apple = {props:['apples'],template:`<div><p>我喜欢---{{apples}}</p><orange :oranges='apples'></orange></div>`,components:{orange}
}
//orange组件
const orange = {props:['oranges'],data(){return {others:"橘子"}},template:`<p>我喜欢{{oranges}}</p>`
}
//调用apple组件
<apple :apples='favorite'></apple>

五在子组件调用孙子组件的数据

遇到这个问题，通常我们的做法可能是，从孙子组件抛发出来，然后在子组件接收一下

//orange组件抛发数据
<input type="text" @input='$emit("input",$event.target.value)'>
//apple组件接收数据
<orange :oranges='apples' v-model='favorite'></orange>
{{favorite}}

到此为止，我们可以实现根组件和子组件，孙子组件的数据共享了。下面还有几种数据共享的方式，单独列出。

数据共享的便捷方式：

一、利用 $root $parent ref （数据支持响应式的）

这几个方式是在边界问题处理中提出来的，他们的功能如下：

1、在每个 new Vue 实例的子组件中，其根实例可以通过 root属性进行访问2、root 属性进行访问 2、root属性进行访问2、parent 属性可以用来从一个子组件访问父组件的实例
3、访问子组件的数据，这里用到ref这个属性（它提供对内部这个指定元素的访问）

//在子组件中，我们可以这样访问根组件的数据
mounted() {console.log(this.$root.username)
}
//在子组件中，我们可以这样访问孙子组件的数据（在子组件调用孙子组件时，要加上ref属性）
<test ref="apple" ></test>
mounted(){console.log(this.$refs.apple.title);
}
//在孙子组件中，我们可以这样访问父组件和根组件的数据
mounted() {console.log(this.$root.username)console.log(this.$parent.title)
},
//在根组件中调用子组件的数据，同样在调用组件中要加上ref这个属性
<test ref='myinputs'></test>mounted(){console.log(this.$refs.myinputs.title)}

二、依赖注入方式（数据不支持响应式，也就是数据修改了页面不会自动刷
新，需要手动）
主要用到两个新的实例选项：provide 和 inject
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
inject 选项来接收指定的我们想要添加在这个实例上的属性。

我们先看下下图效果，最终发现修改了属性值，左边并没有同步变化，所以它是非响应式的，这是个很大的问题。

代码：

//在根组件设置一个provide good这个属性名是自定义的
provide:function(){return {good:this.vehicle,}
}
//在孙子组件中去接收 inject  inject中的属性名要和provide中定义的保持一致
const personb = {inject:['good'],template:`<div><p>personb---{{good}}</p></div>`
}

三、事件总线

event bus在新版的vue中已经被移除了，但是我们还是学习一下它的一个工作机制，总的来说它也是一收一发。

代码：

//使用前，先new一个vue实例var eventbus = new Vue();
//抛发
methods:{sendHand(){eventbus.$emit('message','你好')}
}
//接收
mounted(){//msg是接收的数据，message要和抛发的事件类型一致eventbus.$on('message',(msg)=>{console.log(msg)//改变data的属性值，方便呈现this.message = msg;})
}

以上就是vue组件中关于数据共享的一些方法。

VUE组件之数据共享相关推荐

vue组件中数据共享——vuex
目录 vuex是什么? 使用vuex统一管理状态的好处什么样的数据适合存储到vuex中安装vuex 使用vuex vuex核心概念组件访问state中数据的第一种方式: 组件访问state中数据 ...
vue修改代码同步页面_vue实现两个组件之间数据共享和修改操作
我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了 ...
vue 组件数据共享_Vue共享组件
vue 组件数据共享 As a company, we sell experiences on many different sales channels, gotui.com, musement.c ...
Vue 组件化通信 provide inject ,dispatch ,boardcast
入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
vue组件通信（传值）
vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...
Vue组件通信之bus详解
作为一名frontend coder, vue也用了有年头了,最近看到相关内容时想着总结一些知识记录下来,vue最主要的两大特性就是响应式和组件化,组件化项目少不了组件之间的通讯,那么组件之间到底有几 ...
Vue从零开始之Vue组件
文章目录 Vue 组件组件基础组件模板抽离的写法组件中定义data/方法父子组件通信传值父传子:props属性 props大小写问题子传父: 自定义事件数据双向绑定时子传父父子组件访 ...
vue组件间通信的13种方式
前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...

VUE组件之数据共享

VUE组件之数据共享相关推荐

最新文章

热门文章