VUE是一个轻量级的纯前端框架,它具有组件化开发的特点,即共用模块可以提取出来单独封装为一个组件,并且组件间的数据具有独立性。数据在父子组件之间相互传递,当然,如果需要的话也可以在同级组件之间传递。不过同级组件之间的数据传递相对麻烦一些。
1. 父组件向子组件传递数据
父组件向子组件传递数据时,通过在子组件上自定义属性,如abc,然后属性值为父组件的数据,最后通过子组件的props属性来接收数据。这样就可以在子组件中使用父组件传递过来的数据了。
<div id="app">
<child :abc="msg"></child>
</div>
<template id="child">
<p>父组件传递的数据:{{abc}}</p>
</template>
<script>
let child= {
template:"#child",
props:["abc"]
}
let vue = new Vue({
el: "#app",
data:{
msg: "父组件数据"
},
components:{
child // 在父组件中注册子组件
}
});
</script>
2. 子组件向父组件传递数据
子组件向父组件传递数据,首先在子组件上绑定自定义事件,如xyz,自定义事件的执行函数(transferData)为父组件的函数。然后触发子组件的handleClick函数,通过执行this.$emit()来触发自定义事件执行函数的运行,并传递相应的数据。
<div id="app">
<child :abc="msg" @xyz="transferData"></child>
</div>
<template id="child">
<div>
<button @click="handleClick">发送</button>
</div>
</template>
<script>
let child= {
template:"#child",
props:["abc"],
data:function(){
// 为了保证组件数据的独立性,除了根组件(new Vue({}))外,其余组件的data需使用函数返回对象的形式。
return {
msg:"子组件的数据"
}
},
methods:{
handleClick:function(){
this.$emit("xyz",this.msg);
}
}
}
let vue = new Vue({
el: "#app",
data:{
msg: "父组件数据"
},
components:{
child // 在父组件中注册子组件
},
methods:{
transferData:function(d){
console.log("子组件的数据:"+d);
}
}
});
</script>
3. 同级组件间的数据传递
对于同级组件间数据传递,其实就是借助上面两种传递方式来完成。因此要保证两个同级组件有相同的父组件。即首先将数据传递给父组件,然后通过父组件将数据传递给子组件。具体的代码可以自己去敲一遍。