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 实例的子组件中,其根实例可以通过
r
o
o
t
属
性
进
行
访
问
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组件中关于数据共享的一些方法。