总的来说,子组件靠props方法接收父组件传来的值,通过$emit方法将值传递给父组件.
父组件给子组件传值
父组件在子组件上进行绑定 :msg="person"
,子组件通过props接收传值
父组件在子组件上绑定ref="zi"
,通过触发一个点击事件button 通过this.$refs.zi.zifangfa()
ref属性:
1.被用来给元素或子组件注册引用信息
2.应用和html标签上获取的是真是的DOM元素,用在组件标签上获取的是组件的实例对象
3.使用方式:ref=“xxx” 获取方式:this.$refs.xxx
父组件
<template>
<div>
<h1>我只父组件(给子组件传值)</h1>
<Prosub :msg="person" ref="zi"></Prosub>
<button @click="zujian"></button>
</div>
</template>
<script>
import Prosub from '@/components/Prosub.vue'
export default {
name:'Pro',
data(){
return{
person:{
name:'李辉',
age:'18',
sex:'男'
},
}
},
components:{
Prosub
},
methods:{
zujian(){
this.$refs.zi.zifangfa()
//this.$refs.zi指向子组件 zifangfa()是子组件中定义的方法
}
}
}
</script>
子组件
<template>
<div>
<h2>我是子组件</h2>
<div>{{msg.age}}</div>
</div>
</template>
<script>
export default {
name:'Prosub',
data(){
return{
mess=""
}
},
props:{
msg:[Object,Array]
},
methods:{
zifangfa(){
this.mess="我是子组件!!!"
}
}
}
</script>
子组件给父组件传值
1.通过props实现子传父
跟父组件给子组件穿值使用方法大致相同,子组件使用props之后在方法中调用this.xxx(需要传的内容)。。。。具体看代码吧
父组件
<template>
<div>
<h1>我只父组件(给子组件传值)</h1>
<Prosub :getchildmsg="getchildmsg"></Prosub>
</div>
</template>
<script>
import Prosub from '@/components/Prosub.vue'
export default {
name:'Pro',
components:{
Prosub
},
methods:{
getchildmsg(e){
consol.log(e)
}
}
}
</script>
子组件
<template>
<div>
<h2>我是子组件</h2>
<butto @click="givemsg"> 传值</button>
</div>
</template>
<script>
export default {
name:'Prosub',
data(){
return{
msg:""
}
},
props:{
getchildmsg
},
methods:{
givemsg(){
this.getchildmsg(this.msg)
}
}
}
</script>
2.通过绑定一个事件实现子传父
子组件触发一个事件button @click val() => 使用$emit的第一个参数(aaa)=> 父组件在子组件上进行绑定 @aaa=‘父组件中的某个函数’(getData())最终调用子组件传递的数据或者指令。。具体看代码
父组件
<template>
<div>
<h1>我是父组件(接收子组件的传值)</h1>
<h2>{{getVal}}</h2>
<Prosub @aaa="getData"></Prosub>
</div>
</template>
<script>
import Prosub from '@/components/Prosub.vue'
export default {
name:'Pro',
data(){
return{
getVal:''
}
},
components:{
Prosub
},
methods:{
getData:function (data) {
this.getVal = data
}
}
}
</script>
子组件
<template>
<div>
<h2>我是子组件</h2>
<input type="text" v-model="submsg">
<button @click="val">传值</button>
</div>
</template>
<script>
export default {
name:'Prosub',
data(){
return{
submsg:'5555S',
}
},
methods:{
val:function () {
this.$emit('aaa',this.submsg)
}
}
}
</script>