zoukankan      html  css  js  c++  java
  • Vue $emit $refs子父组件间方法的调用

    1、$emit

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

    子组件:

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

    2、$refs

    父组件调用子组件的方法,可以传递数据

    父组件:

    <template>
      <div id="app">
        <child-a ref="child"></child-a>
        <!--用ref给子组件起个名字-->
        <button @click="getMyEvent">点击父组件</button>
      </div>
    </template>
    <script>
      import ChildA from './components/child.vue'
      export default {
        components: {
          ChildA
        },
        data() {
          return {
            msg: "我是父组件中的数据"
          }
        },
        methods: {
          getMyEvent(){
              this.$refs.child.emitEvent(this.msg);
              //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
          }
        }
      }
    </script>
    

    子组件:

    <template>
      <button>点击我</button>
    </template>
    <script>
      export default {
        methods: {
          emitEvent(msg){
            console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
          }
        }
      }
    </script>
    
  • 相关阅读:
    Linux systemtap定位系统IO资源使用情况(ok)
    DISK 100% BUSY,谁造成的?(ok)
    容易被误读的IOSTAT
    利用BLKTRACE分析IO性能
    iowait 过高问题的查找及解决linux
    top后台执行显示:top: failed tty get 错误
    Nginx解读内置非默认模块 ngx_http_stub_status_module
    Nginx健康检查模块
    平滑升级你的Nginx
    Practice telephone techniques
  • 原文地址:https://www.cnblogs.com/IT123/p/11053186.html
Copyright © 2011-2022 走看看