Vue中子组件触发父组件事件的方法

1. 在子组件中进行< content @click=”close”>事件的绑定
2. 在子组件中的methods对这个close进行定义
3. methods:{
close(){
this.emit(‘on-close’) } }
也就是说,其实这个on-close是我们子组件这里的点击事件啦
4 . 在父组件中的子组件标签中绑定on-close这个事件

  1. <dialog :on-close=”beClose”></dialog>
  2. 在父组件的methods定义这个事件
    methods{
    beClose(){
    console.log(10)
    }
    }

意义:子组件中的某一个小div的点击被我们封装成'on-close'事件
父组件进行监听,一旦子组件触发了,就会调用父组件的方法

    <template>
        <button @click="emitEvent">点击我</button>
        </template>
    <script>
          export default {
          data() {
              return {
              msg: "我是子组件中的数据"
          }
          },
      methods: {
      emitEvent(){
          this.$emit('my-event', this.msg)
    //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
        }
      }
    }
</script>

子组件

    <template>
      <div id="app">
      <child-a @my-event="getMyEvent"></child-a>
        <!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值-->
      </div>
    </template>
    <script>
    import ChildA from './components/child.vue'
    export default {
        components: {
          ChildA
       },
        methods: {
        getMyEvent(msg){
            console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
            }
        }
    }
</script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,652评论 0 32
  • 最近看了下Vue组件的相关知识,除了官网也推荐这篇博客http://www.cnblogs.com/keepfoo...
    juexingzhe阅读 867评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,973评论 19 139
  • 1. 吃烧鸡的少女 这是二月头,虽说冬天快走了春天不远了可是这街上吹着的风还是跟冬天没什么两样,如若非要挑出点什...
    最爱吃肉的猫阅读 368评论 0 0
  • 每一个人都是自己的CEO ,每一个公司都可以成为网红企业。所有的销售载体均是以顾客需求为基础。我们可以借式营销,来...
    小笨鱼王月阅读 66评论 0 0