Vue父子組件元素獲取方法互相調(diào)用示例詳解

更新時間：2023年09月22日 14:38:35 作者：SHQ5785

這篇文章主要為大家介紹了Vue父子組件元素獲取方法互相調(diào)用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、前言

Vue項目開發(fā)過程中，有時候我們需要父組件直接訪問子組件，子組件直接訪問父組件，或者子組件訪問根組件。梳理出如下請求方法：

父組件訪問子組件：$children 或者 $refs;
子組件訪問父組件：$parent;
子組件訪問根組件（通過 new Vue 創(chuàng)建的根 Vue 實例）：$root;

二、父組件訪問子組件

2.1 使用 $children

在父組件中使用 this.$children 拿到的是一個數(shù)組類型，它包含所有子組件實例。

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <button @click="btnClick">按鈕</button>
</div>
<template id="cpn">
  <div>
    <h1>我是子組件</h1>
  </div>
</template>
<script>
  let vm = new Vue({
    el: "#app",
    data: {},
    methods: {
      btnClick() {
        //1.拿到所有子組件，是一個數(shù)組
        console.log(this.$children);
        //2.拿到一個組件實例，可以直接訪問子組件中的方法和 data 中的數(shù)據(jù)
        this.$children[0].showMessage();
        console.log(this.$children[0].name);
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: 'webchang'
          }
        },
        methods: {
          showMessage() {
            console.log('我是子組件');
          }
        }
      }
    }
  });
</script>

2.2 使用 $refs

使用$children 的缺陷如下：

通過 $children 訪問子組件時，是一個數(shù)組類型，訪問其中的子組件必須通過索引值。

但是當(dāng)子組件過多，我們需要拿到其中一個時，往往不能確定它的索引值，甚至還可能會發(fā)生變化。

有時候，我們想明確獲取其中一個特定的組件，這個時候就可以使用 $refs

2.3 $refs 的使用

通過設(shè)置子組件的ref，父組件通過this.$refs.xxx.method_name(data)調(diào)用子組件方法，data參數(shù)可選。

$refs 和 ref 指令通常是一起使用的。

首先，我們在子組件上添加一個 ref 屬性，相當(dāng)于給某一個子組件綁定一個特定的ID。

其次，this.$refs 拿到的是所有標(biāo)有 ref 屬性的子組件（如果一個子組件實例沒有 ref 屬性，通過這種方式是拿不到的），最后拿到的是一個對象，屬性名是子組件實例的 ref 屬性，屬性值是該組件實例。

通過 this.$refs.ID 就可以訪問到該組件。

示例代碼如下：

<div id="app">
  <cpn ref="child1"></cpn>
  <cpn ref="child2"></cpn>
  <!-- 這個子組件實例沒有 ref 屬性，通過 this.$refs 方式拿不到這個組件實例 -->
  <cpn></cpn>
  <button @click="btnClick">按鈕</button>
</div>
<template id="cpn">
  <div>
    <h1>我是子組件</h1>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      message: "hello"
    },
    methods: {
      btnClick() {
        console.log(this.$refs)
        console.log(this.$refs.child1)
        console.log(this.$refs.child1.name)
        this.$refs.child1.showMessage('父組件')
      }
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            name: 'webchang'
          }
        },
        methods: {
          showMessage(value) {
            console.log("子組件方法被調(diào)用，調(diào)用者:" + value)
          }
        }
      }
    }
  });
</script>

三、子組件調(diào)用父組件方法

3.1 方法一：this.$parent.event

直接在子組件中通過this.$parent.event來調(diào)用父組件的方法。示例代碼如下：

父組件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(value) {
        console.log("父組件方法被調(diào)用，調(diào)用者:" + value)
      }
    }
  };
</script>

子組件

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod('子組件');
      }
    }
  };
</script>

注意事項：

盡管在Vue開發(fā)中，我們允許通過 $parent 來訪問父組件，但是在真實開發(fā)中盡量不要這樣做。
子組件應(yīng)該盡量避免直接訪問父組件的數(shù)據(jù)，因為這樣代碼耦合度太高了。
如果我們將子組件放在另外一個組件之內(nèi)，很可能該父組件沒有對應(yīng)的屬性，往往會引起問題。
另外，通過 $parent 直接修改父組件的狀態(tài)，那么父組件中的狀態(tài)將變得飄忽不定，很不利于調(diào)試和維護(hù)。

3.2 方法二： $emit

在子組件里用$emit向父組件觸發(fā)一個事件，父組件監(jiān)聽這個事件。

父組件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測試');
      }
    }
  };
</script>

子組件

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

3.3 方法三：方法傳參

父組件把方法傳入子組件中，在子組件里直接調(diào)用這個方法。

父組件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測試');
      }
    }
  };
</script>

子組件

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

子組件更簡便的寫法

<template>
  <div>
    <button @click="fatherMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
    }
  };
</script>

四、其他調(diào)用方法

由于最終所有組件都會渲染成真實的Dom元素，所以可以通過js或jquery，獲取Dom元素對象，通過模擬點擊的方式觸發(fā)元素綁定的方法，通過本地Cookie、localStorage或sessionStorage做參數(shù)緩存，實現(xiàn)值傳遞。

此方法不限于父子組件，只要組件位于同一頁面都可使用，但因為不符合vue規(guī)范，并非特殊情況不建議使用。

組件A:

<template>
  <div>    
    <h1>我是組件A</h1>
    <button id='btn' @click='methodA()'>點我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      methodA() {　　　　　
      	var parameter= localStorage.getItem('parameter'); 
        console.log('我是組件A方法');
      }
    }
  };
</script>

組件B:

<template>
  <div>    
    <h1>我是組件B</h1>
    <button @click='methodB(data)'>點我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      methodB(data) {
　　  　　localStorage.setItem('parameter',data); 
       　$('#btn').click();//模擬按鈕點擊
       　console.log('模擬點擊按鈕，觸發(fā)A組件方法');
      }
    }
  };
</script>

拓展閱讀

http://shouce.jb51.net/vue/

以上就是Vue 父子組件元素獲取、方法互相調(diào)用的詳細(xì)內(nèi)容，更多關(guān)于Vue父子組件元素獲取方法互調(diào)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: