在vue項(xiàng)目日常開(kāi)發(fā)中，難免要把功能性組件抽離出來(lái)，這樣結(jié)構(gòu)就會(huì)出現(xiàn)父子組價(jià)，兄弟組件等，但是這樣就會(huì)涉及到不同組件需要互相使用其中的值得問(wèn)題。

之前有說(shuō)過(guò)通過(guò)ref來(lái)讓父組件操作子組件，并且傳值，那么我們今天來(lái)詳細(xì)看看。

案例一：點(diǎn)擊父組件的按鈕，操作子組件顯示

注：可以通過(guò)獲取id/class來(lái)操作，這里我就不介紹這種方法了，至于jquery的話，在vue中還是慎用。

介紹：這里通過(guò)給子組件綁定ref屬性，引號(hào)命名自定義，然后父組件通過(guò) this.$refs.名字 就可以操作子組件的元素，以改變它的樣式等。

<template>  <div class="DbSource-box">    <el-button type="primary" icon="" class="addBtn" @click="addDbSource()">新增</el-button>    <db-source-add ref="addAlert" v-on:init="init"></db-source-add>  </div></template> <script>  import DbSourceAdd from "../components/DbSourceManager/DbSourceAdd";  export default {    name: "DbSourceManager",    components: {DbSourceAdd},    methods: {      // 點(diǎn)擊新增按鈕，彈出新增數(shù)據(jù)源的彈框      addDbSource(){        this.$refs.addAlert.$el.style.display = "block";      },    }  }</script>

案列二：獲取子組件data中的變量

介紹：

父組件：

這里通過(guò)給子組件綁定ref屬性，引號(hào)中的命名自定義，然后父組件通過(guò) this.$refs.名字.變量名 就可以獲得子組件中的值

<template>  <div class="DbSource-box">    <el-button type="primary" icon="" class="selectBtn" @click="deleteSelectDbSource()">批量刪除</el-button>    <db-source-table ref="getSelectData" :Data="Data" v-on:init="init"></db-source-table>  </div></template> <script>  import DbSourceTable from "../components/DbSourceManager/DbSourceTable";  export default {    name: "DbSourceManager",    components: {DbSourceTable},    methods: {      // 刪除選中的數(shù)據(jù)源（批量刪除）      deleteSelectDbSource(){        console.log(this.$refs.getSelectData.multipleSelection)      },    }  }</script>

子組件：

<template>  <div class="table-box">      </div></template> <script>  export default {    name: "DbSourceTable",    props:["Data"],    data(){      return {        multipleSelection:[],        pagesize: 3,        currpage: 1,        currId:""      }    }</script>

好了，以上就是父組件獲取子組件的值并且操作子組件的方法。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。