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

  • 相关阅读:
    数组方法的扩展,如map,reduce,fliter,forEach方法
    设计模式总体概括
    centos yum 安装 tomcat
    idea springboot 打包 war
    idea使用tomcat运行maven打包的war
    CentOS 7 用 yum 安装 Nginx
    CentOS更换yum源
    城市代码表mysql
    更改idea启动内存信息
    (三)多表代码生成
  • 原文地址:https://www.cnblogs.com/lovetl/p/11797554.html
Copyright © 2011-2022 走看看