全世界只有不到3 %?的人關注了我

你真是個特別的人

在vue項目日常開發中，難免要把功能性組件抽離出來，這樣結構就會出現父子組件，兄弟組件等，但是這樣就會涉及到不同組件需要互相使用其中的某個值的問題。之前有說過通過ref來讓父組件操作子組件，并且傳值，那么我們今天來詳細看看。點擊父組件按鈕，操作子組件顯示

注：可以通過獲取id/class來操作，這里我就不介紹這種方法了。至于jquery的話，在vue中還是慎用，畢竟jq獲取到的都是全局的，可能會導致獲取其他組件中的元素。

介紹：這里通過給子組件綁定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>好了，以上就是父組件獲取子組件的值并且操作子組件的方法。期待能夠對你有所幫助~~~

總結

以上是生活随笔為你收集整理的jquery查找父窗体id_Vue父组件获取子组件中的变量的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。