- 父组件向子组件传值,将data里的数据绑定在子组件:parentparam='msg'上,子组件在props里直接接收,就能使用
- 子组件向父组件传值,父组件将带参方法传递给子组件@func='param',在子组件里触发该方法并带上参数this.$emit('func',this.childmsg)
<!--+++++++++++++++++++++++++++父组件+++++++++++++++++++++++++++-->
<template>
<div>
<div style="color:red">
<span>这是父组件</span>
</div>
<br>
<div>
<sonParam :parentparam='msg' @func='param'></sonParam>
</div>
</div>
</template>
<script>
import sonParam from '@/components/sonparam/Param';
export default {
data(){
return {
msg: '向子组件传的值'
}
},
methods: {
param(data) {
console.log(data)
}
},
components: {
sonParam
}
}
</script>
<style>
</style>
<!--+++++++++++++++++++++++++++子组件+++++++++++++++++++++++++++-->
<template>
<div>
<span style="color:blue">这是子组件接收到父组件的传值: {{parentparam}}</span>
<br>
<input type="button" value="触发父组件传过来的方法" @click="resileve">
</div>
</template>
<script>
export default {
data(){
return {
childmsg: '子组件的信息'
}
},
props: {
parentparam: ''
},
methods: {
resileve() {
this.$emit('func',this.childmsg)
}
}
}
</script>
<style>
</style>