一、父组件传值给子组件
1.子组件,首先定义一个子组件,然后在子组件中注册props,然后创建一个名为infos的属性,用来接收从父组件传过来的数据
<template>
<div>
<div>{{infos}}</div>
</div>
</template>
<script>
export default {
// 接受父组件的值
props:{
infos:{
type:String //传值的数据类型
}
},
}
</script>
<style>
</style>
2.父组件,在父组件中引入子组件,并加入子组件标签,在子组件标签中添加子组件props中创建的属性,将值通过该属性传递给子组件
<template>
<div>
<div>父组件</div>
<child :infos="parentInfo"></child>
</div>
</template>
<script>
import child from './child' //引入child组件
export default {
data() {
return {
parentInfo: 'a message from parent' //在data中定义需要传入的值
}
},
components: {
child
}
}
</script>
<style>
</style>
二、子组件传值给父组件
1.子组件
首先子组件要触发一个自定义事件;然后将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法(下面的例子是传递多个数据的处理方法),可按自己的业务逻辑设置传的值的数据格式与内容。
<template>
<div>
<div @click="toParent('信息一','信息二')"></div>
</div>
</template>
<script>
export default {
methods:{
//此处是传递了多个参数,根据自己的业务逻辑处理
toParent(info1,info2){
var infos = [info1,info1]
this.$emit("listenToParent",infos);
}
}
}
</script>
<style>
</style>
2.父组件
在父组件中注册子组件,并加入子组件标签,子组件标签上绑定对自定义事件的监听,在监听的方法里面即可拿到子组件传过来的值
<template>
<div>
<div>父组件</div>
<child v-on:listenToParent="getChildMsg"></child>
</div>
</template>
<script>
import child from './child' //引入child组件
export default {
data() {
return {
}
},
components: {
child
},
methods:{
getChildMsg:function(msg){
console.log(msg)
}
}
}
</script>
<style>
</style>