history 远程桌面登陆 哨兵模式 二代征信 list sorting caching clojure cuda bower jmeter性能测试视频 小程序demo源码 jquery去掉空格 oracle修改字段默认值 java遍历json数组 leach算法 python编程练习题 hbuilder插件 mysqlinsert java删除数组元素 java学习手册 java数据 java的基本类型 java开发环境配置 怎么看java版本 java成员变量 java获取时间 php开发实例 opengl编程指南 修改mac地址软件 乱码查看器 ad下载 fdisk下载 修改ip地址软件 python缩进规则 文章查重软件 英雄联盟设置 德玛上单天赋 摇骰子表情包 nastran
当前位置: 首页 > 学习教程  > 编程语言

emit的用法

2021/1/28 23:22:13 文章标签:

emit: 子组件向父组件传值 JS用法 vm.$emit( eventName, […args] ) 参数&#xff1a; {string} eventName[…args] 触发当前实例上的事件。附加参数都会传给监听器回调。 <template><div><div>$emit子组件调用父组件的方法并传递数据</div><h1&g…

emit: 子组件向父组件传值

JS用法

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

  • {string} eventName
  • […args]
    触发当前实例上的事件。附加参数都会传给监听器回调。
<template>
  <div>
    <div>$emit子组件调用父组件的方法并传递数据</div>
    <h1>父组件数据:{{msg}}</h1>
    <emit-ch @updateInfo="updateInfo" :sendData="msg"></emit-ch>
  </div>
</template>
<script>
import emitCh from './$emitCh'
export default {
  name: 'emitFa',
  components: { emitCh },
  data () {
    return {
      msg: '北京'
    }
  },
  methods: {
    updateInfo (data) { // 点击子组件按钮时触发事件
      console.log(data)
      this.msg = data.city // 改变了父组件的值
    }
  }
}
</script>

<!-- ==================================================== -->
<template>
 <div class="train-city">
    <h3>父组件传给子组件的数据:{{sendData}}</h3>
    <br/><button @click='select()'>点击子组件</button>
  </div>

</template>

<script>
export default {
  name: 'emitCh', // 相当于一个全局 ID,可以不写,写了可以提供更好的调试信息
  props: ['sendData'], // 用来接收父组件传给子组件的数据
  data () {
    return {
    }
  },
  computed: {
  },
  methods: {
    select () {
      let data = {
        city: '杭州'
      }
      this.$emit('updateInfo', data)// select事件触发后,自动触发updateInfo事件
    }
  }
}
</script>

TS用法

@Emit

<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>

<!-- ============================================== -->
<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>


本文链接: http://www.dtmao.cc/news_show_650187.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?