vue - 调用子组件方法

vue 调用子组件方法，一起来看下吧：

1、最重要的部分是在父组件调用子组件的标签上，定义了一个ref属性：child，通过这个属性，可以获取到子组件里面的的属性和方法。

2、在父组件的方法parentMethod执行的时候，使用：this.$refs.child.childMethod()来调用子组件的方法。

父组件代码：

<template>  <div class="parent">    <div class="parent-wrapper">      <button @click="parentMethod">我是父组件的按钮，但是我可以调用子组件的方法</button>    </div>    <Child ref="child"></Child>  </div></template> <script>import Child from '@/components/test/Child'export default {  name: 'parent',  data () {    return {          }  },  components: {    Child  },  methods: {    parentMethod(){      this.$refs.child.childMethod();    }  }}</script> <!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.parent-wrapper {  width: 300px;  height: 300px;  border: 1px solid red;  margin: 50px;}</style>

子组件代码：

<template>  <div class="child">    <div class="child-wrapper">      <button @click="childMethod">这是子组件的按钮</button>    </div>      </div></template> <script>export default {  name: 'child',  data () {    return {          }  },  methods: {    childMethod() {      alert("我是子组件的方法！")    }  }}</script> <!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.child-wrapper {  width: 300px;  height: 300px;  border: 1px solid blue;  margin: 50px;}</style>