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部分可以看作是一个子组件的引入,和父子组件的传值一样的写法
如有问题请即使指出,谢谢