zoukankan      html  css  js  c++  java
  • vue中父组件调用子组件函数

    用法: 子组件上定义ref="refName",  父组件的方法中用 this.$refs.refName.method 去调用子组件方法

    详解: 父组件里面调用子组件的函数,父组件先把函数/方法以属性形式传给子组件;那么就需要先找到子组件对象 ,即  this.$refs.refName.

    然后再进行调用,也就是 this.$refs.refName.method

    如下:

    子组件:

    <template>
      <div>
        childComponent
      </div>
    </template>
     
    <script>
      export default {
        name: "child",
        methods: {
          childClick(e) {
            console.log(e)
          }
        }
      }
    </script>

    父组件:

    <template>
      <div>
        <button @click="parentClick">点击</button>
        <Child ref="mychild" />   //使用组件标签
      </div>
    </template>
     
    <script>
      import Child from ‘./child‘;   //引入子组件Child
      export default {
        name: "parent",
        components: {
          Child    // 将组件隐射为标签
        },
        methods: {
          parentClick() {
            this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
          }
        }
      }
    </script>
  • 相关阅读:
    《JavaScript语言精粹》小记
    JavaScript之单例实战
    浅谈requireJS
    细说gulp
    Javascript之自定义事件
    ClipboardJS复制粘贴插件的使用
    重新学习vue基础
    正则简单说明
    JavaScript字符串api简单说明
    移动端浏览器问题
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/9726280.html
Copyright © 2011-2022 走看看