zoukankan      html  css  js  c++  java
  • 子组件调用父组件的方法并传递数据

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

      

    $refs

    子组件
    
    <template>
      <button>点击我</button>
    </template>
    <script>
      export default {
        methods: {
          emitEvent(msg){
            console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
          }
        }
      }
    </script>
    
    父组件
    
    <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>
    

      

      

  • 相关阅读:
    Andrew Ng机器学习 二: Logistic Regression
    Andrew Ng机器学习 一: Linear Regression
    python爬有道翻译
    硬件学习之无刷电机理论1
    字符串优化处理
    缓冲&缓存&对象池概念的理解
    线程池的学习及使用
    线程同步&线程池
    数据类型转换&运算符
    集合中常用的数据结构
  • 原文地址:https://www.cnblogs.com/hanli-you/p/8011719.html
Copyright © 2011-2022 走看看