1. 程式人生 > >vue父組件調用子組件資源

vue父組件調用子組件資源

aaa def pre 情況 efs back ref nbsp clas

通過上篇博文提到的方法我們可以觸發子組件的某個事件來實現調用子組件的某些資源(例如數據和方法),但是更多的情況下我們會想不通過觸發子組件的事件,而直接調用子組件的資源

這個時候我們就需要用到ref了,使用也不難

<template>
    <div>
        <myChild ref="child1"></myChild>
    </div>
</template>

<script>
export default {
    method: {
        Mymethod() {
            
//在template裏寫了ref屬性的元素或者組件,都會被vue存到$refs對象裏 this.$refs[myChild] //獲取了這個組件實例myChild //假設myChild有data aaa=123,method bbb(){ alert(‘456‘) } //我們可以直接調用 this.$refs[mychild].aaa = 666 this.$refs[mychild].bbb() } } } </script>

vue父組件調用子組件資源