Vue

vue中父组件调用子组件里的方法

2018-11-28  本文已影响0人  明灭_

vue的子组件 Child 中定义了一个方法 childFn() ,现在想要在父组件 Parent 中调用这个方法,代码如下:

子组件:

<tenmplate>
  <div class="child">
    ...
  </div>
</template>

<scrtipt>
export default {
  methods: {
    childFn() {
      console.log('我是子组件的方法');
    }
  }
}
</script>

父组件:

<tenmplate>
  <div class="parent">
    <v-child ref="child"></v-child>
  </div>
</template>

<scrtipt>
import Child from './Child/Child.vue';

export default {
  components: {
    [
      'v-child': Child
    ]
  },
  methods: {
    parentFn() {
      this.$refs.child.childFn(); // 调用子组件的childFn()方法
    }
  }
}
</script>

(注意:子组件不能调用父组件的方法)

上一篇 下一篇

猜你喜欢

热点阅读