vue父子组件之间的传值
Posted loveyt
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父子组件之间的传值相关的知识,希望对你有一定的参考价值。
引入组件
父组件
<div>
<form-edit></form-edit>
</div>
import FormEdit from "路径" //引入
export default {
name: "HelloWorld",
components:{
FormEdit
},
data(){
return{
}
}
}
子组件
<template>
<div>{{ change}}</div>
</template>
export default {
name: "child",
data(){
return{
change:123
}
}
}
父组件 --> 子组件
父组件
<div>
<child v-bind:change="str"></child>
</div>
export default {
name: "HelloWorld",
data(){
return{
str: '123' //str可以是对象,数组等
}
}
}
子组件
<template>
<div>{{ change}}</div>
</template>
export default {
name: "child",
props:["change"],
data(){
return{
console.log(this.change)
}
}
}
子组件 --> 父组件
父组件
<div>
<child v-on:add="ok"></child>
</div>
export default {
name: "HelloWorld",
data(){
return{
}
},
methods:{
ok:function(param){} //param子组件传过来的值
}
}
子组件
<template>
<div @click="dian">我是子组件</div>
</template>
export default {
name: "child",
data(){
return{
str:'123'
}
},
methods:{
dian(){
this.$emit("add",str)//第一个值为父组件绑定的属性,第二个值为要传的值
}
}
}
以上是关于vue父子组件之间的传值的主要内容,如果未能解决你的问题,请参考以下文章