vue 组件间传值
2019-04-11 本文已影响0人
Gino_Li
子组件向父组件传值
1.在子组件中定义一个事件
2.在事件中通过$emit方法传递数据
3.在父组件中注册通过$emit定义的事件
4.通过父组件中注册的事件获取到数据
$emit(name,data);
作用:注册一个自定义事件,并发送数据
name:表示自定义事件
data:表示要发送的数据
<body>
<div id="app">
<test @toparent="getson"></test>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var test = {
template:`
<ul>
<li @click="getIndex(index)" v-for="(val,index) in list">{{val}}</li>//在子组件中定义一个事件
</ul>
`,
data:function(){
return{
list:['html','css','js']
}
},
methods:{
getIndex(index){
console.log({index});
this.$emit("toparent",[index,this.list]);//在事件中通过$emit方法传递数据
}
}
}
new Vue({
el:"#app",
components:{
test //在父组件中注册通过$emit定义的事件
},
methods:{
getson(res){
console.log(res)//通过父组件中注册的事件获取到数据
}
}
})
</script>
</body>
父组件向子组件传值
1.用props属性给组件声明一个自定义属性
2.在父组件中调用子组件,通过上一步声明的自定义属性来传递参数
<body>
<div class="test">
<tab :title="titleArr" :list="contList"></tab>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component("tab",{
props:['title','list'],
template:`
<div :style="objhead">
<div :style="clearFloat">
<div :style="hContent">{{title[0]}}</div>
<div :style="hContent">{{title[1]}}</div>
<div :style="hContent">{{title[2]}}</div>
</div>
<ul>
<li :style="clearFloat" v-for="val in list" >
<div :style="hContent" >{{val.name}}</div>
<div :style="hContent" >{{val.price}}</div>
<div :style="hContent" >{{val.num}}</div>
</li>
</ul>
</div>`,
data:function(){
return{
objhead:{
width:'600px',
background:"#eee",
},
hContent:{
float:"left",
width:"33.33%",
lineHeight:"35px",
textAlign:"center"
},
clearFloat:{
overflow:"hidden"
}
}
}
})
var vmTest = new Vue({
el:'.test',
data:{
titleArr:['商品名','价格','数量'],
contList:[{
name:"青菜",
price:12,
num:1
}]
}
})
</script>
</body>
子组件之间传值
//借助另一个实例化对象发送
var app = new Vue()
var test1 = {
template:"<div @click='tos'>{{msg}}</div>",
data:function(){
return{
msg:"我是组件1的数据"
}
},
//必须通过事件发送,不能用钩子函数
methods:{
tos(){
//新的实例化Vue对象
app.$emit('tosibling',this.msg);
}
}
}
var test2 = {
template:"<div>{{msg}}</div>",
data:function(){
return{
msg:"我是组件2的数据"
}
},
created(){
//新的实例化Vue对象
app.$on('tosibling',function(res){
console.log(res);
})
}
}
var vm = new Vue({
el:"#app",
components:{
test1,
test2
}
})
