Vue $emit用法 - B/S开发框架


1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit,让父组件监听到自定义事件 。

JavaScript 全选
vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn; 

例如:子组件:

HTML 全选
<template>
  <div class="train-city">
    <h3>父组件传给子组件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
JavaScript 全选
<script>
  export default {
    name:'trainCity',
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      select(val) {
        let data = {
          cityname: val
        };
        this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件
      }
    }
  }
</script>

 

父组件:

HTML 全选
<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
    </div>
<template>

 

JavaScript 全选
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
      updateCity(data){//触发子组件城市选择-选择城市的事件
        this.toCity = data.cityname;//改变了父组件的值
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>

 

版权声明:本文为开发框架文库发布内容,转载请附上原文出处连接
C/S框架网
评论列表

发表评论

评论内容
昵称:
关联文章

Vue $emit用法 - B/S开发框架
Vue中ref和$refs详解 - B/S开发框架
Vue开发笔记大全
WEB开发框架开发环境:VSCode+VUE+Element UI
C#.Net B/S简单框架结构示例[原创]
Vue指令大全 - 开发实践
Winform C/S结构与Web B/S结构开发MES/ERP系统优缺点及区别
Vue启动自定义页面,Editor.vue
Web开发框架-VUE使用Axios调用后台WebAPI接口
VSCode开发:NPM/Vue命令大全
VSCode+VUE+Element-UI学习资料大全
VSCode开发Vue项目文件目录结构说明
main.js 启动Vue两种写法
系统部署之B/S结构C/S结构剖析
使用Vue+VSCode新建HelloWorld项目
CSFramework.WebApi框架快速搭建后端服务支持APP、B/S、C/S、微信小程序、公众号、Web客户端
代码生成器的工具的用法如何与快速开发模块结合应用呢?
基于B/S架构CMS内容管理系统软件-适用开发Blog博客、软件帮助文档、企业官网网站
VSCode+Vue+Axios编写HelloWorld项目源码
软件开发与设计 - EMS-电子商城系统-纵横B2B电子商务系统XYECS!B2B 3.1