溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在vue項目日常開發中，難免要把功能性組件抽離出來，這樣結構就會出現父子組價，兄弟組件等，但是這樣就會涉及到不同組件需要互相使用其中的值得問題。
之前有說過通過ref來讓父組件操作子組件，并且傳值，那么我們今天來詳細看看。
案例一：點擊父組件的按鈕，操作子組件顯示
注：可以通過獲取id/class來操作，這里我就不介紹這種方法了，至于jquery的話，在vue中還是慎用。
介紹：這里通過給子組件綁定ref屬性，引號命名自定義，然后父組件通過 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: {
// 點擊新增按鈕，彈出新增數據源的彈框
addDbSource(){
this.$refs.addAlert.$el.style.display = "block";
},
}
}
</script>
案列二：獲取子組件data中的變量
介紹：
父組件：
這里通過給子組件綁定ref屬性，引號中的命名自定義，然后父組件通過 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: {
// 刪除選中的數據源（批量刪除）
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>
好了，以上就是父組件獲取子組件的值并且操作子組件的方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
