Vue-cli3.0+typescript 父子组件传值，兄弟组件的传值，router-view的传值

父组件给子组件传值

父组件内

在父组件引入子组件的地方，绑定一个变量 v-bind或者缩写 ：

<InputBox :toChildMsg='cardNumber'/>

给这个变量添加要传递的内容

export default class AddCardNum extends Vue { 
    // 子组件显示的信息
    cardNumber: any = {
        key: 'cardNumVal',
        title: '卡号',
        errorMsg: '请输入正确的卡号',
        placeholderMsg: '该交易支持储蓄卡/信用卡',
        cameraIsShow: true, 
        ipnutMaxLength: 25,
        regular: /^([1-9]{1})[\d\s]{18,24}$/,
        queryCardNumber:''
    };
}

子组件内

使用@Prop 接收数据

import { Component, Vue, Prop } from 'vue-property-decorator';  //需要引入Prop
@Prop({
	type: Object,
	required: false
}) toChildMsg!: object;

toChildMsg就是接收到的数据 toChildMsg.key \ toChildMsg.key可直接使用

子组件给父组件传值

子组件内

使用@Emit监听一个事件,此事件虽然名字和下面的代码事件一样，实际上是监听父组件的事件

import { Component, Vue, Emit } from 'vue-property-decorator'; //需要引入Emit
@Emit('foucus') focusFn() {} //  只触发事件不传值
@Emit('input') onInput(val?: any) {} 
//  传值且传多个值时，每一个参数的类型都要定义，否则会报错

//触发子组件的传值需要在子组件的事件中触发，不能直接在html中定义
foucus(){
	this.focusFn();//只触发事件不传值
}
input(){
	this.onInput(isTrue);//传值
}

父组件内

<InputBox @input="check" @foucus="isFocus()" />   //@后绑定的事件即为子组件被监听的事件

isFocus() {
	alert('事件触发');
}
check(val: string) {
    alert(val);  //val即为值
}

兄弟组件传值

开发过程中遇到过这个问题，尝试用bus传值来写，但是并没有成功，后来查了资料并灭有解决，所以直接用子传父，父再传子的方法来解决的。写法请参考上面代码

router-view 的传值

router-view 的写法即子路由的写法，router-view部分可以看作是一个子组件的引入，和父子组件的传值一样的写法

如有问题请即使指出，谢谢