java中emit的用法_emit的用法

emit: 子组件向父组件传值

JS用法

vm.$emit( eventName, […args] )

参数：

{string} eventName

[...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

$emit子组件调用父组件的方法并传递数据

父组件数据：{{msg}}

import emitCh from './$emitCh'

export default {

name: 'emitFa',

components: { emitCh },

data () {

return {

msg: '北京'

}

},

methods: {

updateInfo (data) { // 点击子组件按钮时触发事件

console.log(data)

this.msg = data.city // 改变了父组件的值

}

}

}

父组件传给子组件的数据：{{sendData}}

点击子组件

export default {

name: 'emitCh', // 相当于一个全局 ID，可以不写，写了可以提供更好的调试信息

props: ['sendData'], // 用来接收父组件传给子组件的数据

data () {

return {

}

},

computed: {

},

methods: {

select () {

let data = {

city: '杭州'

}

this.$emit('updateInfo', data)// select事件触发后，自动触发updateInfo事件

}

}

}

TS用法

@Emit

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;

}

}

向父组件传值

向父组件传值

向父组件传值

// 引入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();

}

}