美文网首页Vue
Vue父组件调用子组件的方法

Vue父组件调用子组件的方法

作者: King斌 | 来源:发表于2020-06-24 17:16 被阅读0次

    vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用,例如:

    父组件:

    <template>
      <div @click="fatherMethod">
        <child ref="child"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child.vue';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {this.$refs.child.childMethods();
          }
        }
      };
    </script>
    

    子组件:

    <template>
      <div>{{name}}</div>
    </template>
    <script>
      export default {
        data() {
          return {
            name: '测试'
          };
        },
        methods: {
          childMethods() {
            console.log(this.name);
          }
        }
      };
    </script>
    

    相关文章

      网友评论

        本文标题:Vue父组件调用子组件的方法

        本文链接:https://www.haomeiwen.com/subject/bvxdfktx.html