vue中组件中的值传递方式
父组件传值给子组件
方法:
父组件:
<Header :xxxx='num'></Header>
子组件:
props:['xxxx'],//方法一
props: {xxxx:String }//方法二
父组件(Home.vue文件代码):
<template>
<div>
父组件(Home.vue文件)
<Header :xxxx='num'></Header>//num对应data中的num,xxxx相当于key,传给子组件
</div>
</template>
<script type="text/javascript">
import Header form './Header'
export default{
data(){
return{
num:'数据'
}
},
components:{
Header
}
}
</script>
子组件(Header.vue文件代码):
<template>
<div>
{{xxxx}}
</div>
</template>
<script>
export default {
props:['xxxx'],//方法一
props:
{xxxx:String }//方法二
}
</script>
子组件传值给父组件
方法:
父组件:
<Header @childInput='getVal'></Header>
子组件:
this.$emit(”自定义事件名称“,要传的数据)
父组件(Home.vue文件代码):
<template>
<div>
父组件(Home.vue)
<hr/>
{{msgVal}}
<Header @childInput='getVal'></Header>//childInput对应子组件中自定义事件
</div>
</template>
<script type="text/javascript">
import Header form './Header'
export default{
data(){
return{
msgVal:''
}
},
components:{
Header
},
methods:{
getVal(msg){
this.msgVal=msg;//把接收过来的内容赋值给msgVal
}
}
}
</script>
子组件(Header.vue文件代码):
<template>
<div>
子组件(Header.vue)
<input type="" name="" v-model='changeVal'>
</div>
</template>
<script>
export default {
data(){
return{
changeVal:''
}
},
watch:{
changeVal(){
this.$emit("childInput",this.changeVal);//childInput自定义事件
}
}
}
</script>