vue父组件调用子组件的方法只有通过refs方法。

• vue 中refs的作用及用法

1.获取dom元素

        通过`this.$refs.name`获取dom元素

// HTML
<div ref="myref">123</div>
// JS
let myDOM = this.$refs.myref;
console.log(myDOM); // <div data-v-4bf94fa0>123</div>

2.获取子组件中的data

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "myhua"
    };
  }
};
</script>
// 父组件
<template>
  <div id="app">
    <Son ref="myref"></Son>
  </div>
</template>
<script>
import Son from "./components/son";
export default {
  mounted() {
    console.log(this.$refs.myref.name); //输出子组件data中的name的值：myhua
  },
  components: {
    Son
  }
};
</script>

3.调用子组件中的方法

// 子组件
<template>
  <div>
    我是子组件
  </div>
</template>
<script>
export default {
  methods: {
    logName() {
      console.log("myhua!!");
    }
  }
};
</script>
// 父组件
<template>
  <div id="app">
    <Son ref="myref"></Son>
  </div>
</template>
<script>
import Son from "./components/son";
export default {
  mounted() {
    this.$refs.myref.logName();//子组件中的方法
  },
  components: {
    Son
  }
};
</script>

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

例子1：

//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
<script>
import Child from './child';
export default {
    methods: {
        handleClick() {
              this.$refs.child.sing();
        },
    },
}
</script>
//子组件中
<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    sing() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

例子2：

父组件：

<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父组件调用子组件的方法有几种。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容，希望对大家有所帮助！引用本文内容时，请注明出处！谢谢合作！