父传子
父组件
<template>
<div>
<!-- 属性传值 -->
<indexs :fatherInfo="fatherInfo" />
<fin-card>子组件传递的数据：{
{
sonMsg }}</fin-card>
</div>
</template>
<script lang="ts">
import {
Component, Vue } from 'vue-property-decorator';
import indexs from './indexs.vue';
@Component({
components: {
indexs,
},
})
export default class HelloWorld extends Vue {
fatherInfo: String = 'hello son';//父组件数据
}
</script>
<style scoped lang="scss">
</style>
子组件
<template>
<div>
<div>{
{
fatherInfo }}</div>
</div>
</template>
<script lang='ts'>
// 引入 Prop Emit
import {
Vue, Component, Prop, Emit } from 'vue-property-decorator';
@Component
export default class YourComponent extends Vue {
@Prop({
type: String, //；类型
required: false,//是否必填
default: '',// 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
})
fatherInfo!: String;
}
</script>
<style scoped lang="scss">
</style>
子传父
父组件
<template>
<div>
<!-- 属性传值 自定义事件 -->
<indexs @getSonMsg="getSonMsg" />
<fin-card>子组件传递的数据：{
{
sonMsg }}</fin-card>
</div>
</template>
<script lang="ts">
import {
Component, Vue } from 'vue-property-decorator';
import indexs from './indexs.vue';
@Component({
components: {
indexs,
},
})
export default class HelloWorld extends Vue {
sonMsg: String = '';
getSonMsg(sonMsg: String) {
// 接受
this.sonMsg = sonMsg;
}
}
</script>
<style scoped lang="scss">
</style>
子组件
<template>
<div>
<fin-button type='primary' @click="sendMsg">Send</fin-button>
</div>
</template>
<script lang='ts'>
// 引入 Prop Emit
import {
Vue, Component, Prop, Emit } from 'vue-property-decorator';
@Component
export default class YourComponent extends Vue {
sonMsg: String = 'hello father';
// getSonMsg 父组件引用子组件上 绑定的事件名 send 处理给父组件传值的逻辑
@Emit('getSonMsg') send(sonMsg: String) {
}
sendMsg() {
this.send(this.sonMsg);
}
}
</script>
<style scoped lang="scss">
</style>