@Emit和@Prop属于vue-property-decorator库,使用时需要先导入
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
1.父组件向子组件传值:
父组件代码:
<template>
<div class="container">
<!-- value需要子组件@Prop定义,这里把驼峰化横线 -->
<child-com :parent-value="msg"></child-com>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import childCom from "路径";
@Component({
components: {
childCom // 声明子组件
}
})
export default class Parent extends Vue {
private msg: string = "要传给子组件的值";
}
</script>
子组件代码:
<template>
<div class="container">
<!-- 这里显示父组件传来的值 -->
{{parentValue}}
</div>
</template>
<script lang="ts">
// 引入Prop
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Child extends Vue {
@Prop(String) // 括号里为父组件传来的值的类型
private parentValue: string; // 父组件传来的值用parentValue接收
prvate crated() {
// 输出
console.log(this.parentValue);
}
}
</script>
注意:::如果是父组件向子组件动态传值(即变量)需要做以下更改:
子组件中接收变量的值需要有一个默认值,比如上面子组件中的代码:
@Prop(String)
private parentValue: string = ""; // 这里默认给了一个空值
同时需要对这个变量进行监听,监听其变化:
@Watch("parentValue")
private onParentValue(newValue: any) {
// 输出变化后的值
console.log(newValue);
}
2.子组件向父组件传值
子组件代码:
<template>
<div class="container">
<!-- 方法一: 直接调用@Emit -->
<button @click="handleToParent1">向父组件传值</button>
<!-- 方法二: 直接调用@Emit -->
<button @click="handleToParent2">向父组件传值</button>
<!-- 方法三: 间接调用 -->
<button @click="handleClickEvent">向父组件传值</button>
</div>
</template>
<script lang="ts">
// 引入Emit
import { Component, Vue, Emit } from "vue-property-decorator";
@Component
export default class Child extends Vue {
// 子组件向父组件传的值
private msg: string = "要传递给父组件的值";
// 方法一
@Emit()
private handleToParent1() {
return this.msg; // return将要传递的值
}
// 方法二: 注意,这时父组件接收值时是用@Emit("test")括号中的test接收的,test会把正面的方法名字覆盖。(test)是自定义的
@Emit("test")
private handleToParent2() {
return this.msg; // return将要传递的值
}
// 方法三
// 先定义父组件接收的方法(同方法一、二)
@Emit()
private handleToParent3() {
return this.msg; // return将要传递的值
}
private handleClickEvent() {
// ... 一些其它的操作
// 然后手动调用传值
this.handleToParent3();
}
}
</script>
父组件代码:
<template>
<div class="container">
<!-- value需要子组件@Prop定义,这里把驼峰化横线 -->
<child-com :parent-value="msg"></child-com>
<!-- 方法一: 驼峰转横线 -->
<child-com @handle-to-parent1="handleChildValue"></child-com>
<!-- 方法二: 驼峰转横线. 注意,这里是用test接收的 -->
<child-com @test="handleChildValue"></child-com>
<!-- 方法三: 驼峰转横线 -->
<child-com @handle-to-parent3="handleChildValue"></child-com>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import childCom from "路径";
@Component({
components: {
childCom // 声明子组件
}
})
export default class Parent extends Vue {
private msg: string = "要传给子组件的值";
private childValue: string = "";
// 处理子组件传过来的值 val:是自定义的
private handleChildValue(val: string) {
// val: 子组件传过来的值
this.childValue = val;
}
}
</script>
如果要传递多个值,建议把这多个值封装成一个对象,然后一块传递。如:
// 子组件
@Emit()
private test() {
// 要传给父组件的多个值
const params = {
param1: value1,
param2: value2,
// ......
};
return params;
}