zoukankan      html  css  js  c++  java
  • vue $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>
    ————————————————
    版权声明:本文为CSDN博主「骚φ(゜▽゜*)♪白」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/chaochao466/article/details/82884966

  • 相关阅读:
    IntelliJ IDEA基本设置
    git安装
    Git的作用与安装
    git是什么
    SpringMVC控制器类方法的返回值
    SpringMVC中Model机制
    什么是Nosql
    如何使用Jedis操作redis
    redis中数据类型操作命令
    redis的全局命令
  • 原文地址:https://www.cnblogs.com/lovetl/p/11797554.html
Copyright © 2011-2022 走看看