Vue传值方式,在Angular和VUE的学习中了解了组件的概念,组件就是自定义的元素,包含了一些HTML元素和一些可封装重用的代码。Vue组件同时也是Vue实例,具有相同的生命周期钩子。本篇博客主要讲解如何在父子组件之间进行传值通信操作。
父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息。
一、父组件传值给子组件
<body>
<div id="app">
<!--引入子组件-->
<coml v-bind:parentmsg="msg"></coml>
<h1>这是父组件-----{{ msg }}</hl>
</div>
<template id="tmp1">
<div>
<h1>这是子组件-----{{ parentmsg }}</hl>
</div>
</template>
<script>
var coml={
template:"#tmp1",
<!--接受父组件的传值-->
props:['parentmsg'],
}
}
var vm=new Vue({
el:'#app',
data:{
msg:'这是父组件中的数据',
},
components:{
coml
}
})
</script>
</body>
效果图:
二、子组件给父组件传值
<body>
<div id="app">
<!--引入子组件,定义@func方法监听子组件-->
<coml @func="getmsgFormSon"></coml>
<h1>这是父组件-----{{ msgFormSon }}</hl>
</div>
<template id="tmp1">
<div>
<h1>这是子组件-----{{ msg }}</hl>
<!--定义子组件传值的方法-->
<input type="button" value="向父组件传递消息" @click="sendMsg">
</div>
</template>
<script>
var coml={
template:"#tmp1",
data(){
return{
msg:'子组件中的数据'
}
},
methods:{
sendMsg(){
<!--子组件触发,被监听的方法,传值-->
this.$emit('func',this.msg)
}
}
}
var vm=new Vue({
el:'#app',
data:{
msgFormSon:''
},
methods:{
<!--监听并接受子组件的传值-->
getmsgFormSon(data){
this.msgFormSon = data;
}
},
components:{
coml
}
})
</script>
</body>
效果图:
以上就是父子组件之间的传值方式,还有组件之间的传值方式,会在下一篇博客中做详细介绍。