美文网首页Vue
Vue中$emit的用法

Vue中$emit的用法

作者: 西瓜鱼仔 | 来源:发表于2020-01-08 09:39 被阅读0次

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

示例

子组件:

<template>
  <div>
      <button @click="sendMsgToParent">向父组件传值</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMsgToParent:function () {
        this.$emit("childMsg","hello world!");
      }
    }
  }
</script>

父组件:

<template>
  <div id="app">
    //@childMsg 与子组件中this.$emit("childMsg","hello world!")起的名字一致
    <child @childMsg="showChildMsg"></child>
  </div>
</template>

<script>
  import child from './components/Child'
  export default {
    name: "app",
    components: {
      child
    },
    methods:{
      showChildMsg:function (data) {
        console.log(data);
      }
    }
  }
</script>

相关文章

网友评论

    本文标题:Vue中$emit的用法

    本文链接:https://www.haomeiwen.com/subject/ffmjactx.html