父組件主動獲取子組件的數據和方法：
1.調用子組件的時候定義一個ref
<v-header ref="header"></v-header>
2.在父組件里面通過
this.$refs.header.屬性 this.$refs.header.方法
子組件主動獲取父組件的數據和方法：
this.$parent.數據
this.$parent.方法
下面寫一個例子：
效果圖：
項目結構：
App.vue是父組件
Home.vue是子組件
父組件：App.vue
<!--父組件給子組件傳值--> <template> <div> <IHome ref="home"></IHome> <button @click="getSonMethod">父組件調用子組件的方法和屬性</button> </div> </template> <script> /** 父組件主動獲取子組件的數據和方法： 1.調用子組件的時候定義一個ref <v-header ref="header"></v-header> 2.在父組件里面通過 this.$refs.header.屬性 this.$refs.header.方法 子組件主動獲取父組件的數據和方法： this.$parent.數據 this.$parent.方法 */ import IHome from './components/Home.vue'; export default { name: 'app', data() { return { title: '標題', content:'內容', } }, methods:{ iFatherMethod(arge){ alert('父組件的iFatherMethod'+arge); }, getSonMethod(){ //拿到子組件的變量 alert(this.$refs.home.msg); //調用子組件的方法 this.$refs.home.isonmethod1(); } }, components: { /*前面的組件名稱不能和html標簽一樣,會出現沖突*/ 'IHome': IHome, } } </script> <style lang="scss" scoped> .content { font-size: 50px; } button { width: 100%; line-height: 150px; text-align: center; font-size: 50px; } </style>
子組件：Home.vue
<!--模板，里面寫html--> <template> <!--根組件，只能有一個根組件--> <div> <!--顯示父組件傳過來的值--> <div class="head">{{msg}}</div> <button @click="isdiaomethod">子組件調用父組件的方法</button> </div> </template> <!--script里面寫邏輯--> <script> export default { name: "IHeader", data() { return { msg: '子組件的變量', } }, methods: { isonmethod1(){ alert("子組件的isonmethod1方法"); }, isdiaomethod(){ this.$parent.iFatherMethod("111"); } }, } </script> <!--style里面寫樣式--> <style lang="scss" scoped> /*scoped css只在本文件中起作用*/ .head { width: 100%; line-height: 150px; text-align: center; background-color: aqua; font-size: 50px; } button { width: 100%; line-height: 150px; text-align: center; font-size: 50px; } </style>
源碼下載：
vuedemo15
https://download.csdn.net/download/zhaihaohao1/11112029
轉載：https://blog.csdn.net/zhaihaohao1/article/details/89021956
-----------------------------------------------------------------------自己項目-----------------------------------------------------------------------------------------
welcome.vue
<template> <div> <!-- 引入組件 定義一個on的方法監聽子組件的狀態 --> <demo1 ref="demo1"> </demo1> <el-button type="primary" @click="getSonMethod">主要按鈕</el-button> </div> </template> <script> import demo1 from "./demo1.vue"; export default { components: { demo1, }, data() { return { //父傳子值 num: "", }; }, methods: { getSonMethod() { //調用子組件的屬性 this.$refs.demo1.dialogFormVisible = true; }, }, }; </script> <style> </style>
demo1.vue
<template> <div> <el-dialog title="收貨地址" :visible.sync="dialogFormVisible"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" > <el-form-item label="活動名稱" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="活動區域" prop="region"> <el-select v-model="ruleForm.region" placeholder="請選擇活動區域"> <el-option label="區域一" value="shanghai"></el-option> <el-option label="區域二" value="beijing"></el-option> </el-select> </el-form-item> <el-form-item label="活動時間" required> <el-col :span="11"> <el-form-item prop="date1"> <el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%" ></el-date-picker> </el-form-item> </el-col> <el-col class="line" :span="2">-</el-col> <el-col :span="11"> <el-form-item prop="date2"> <el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%" ></el-time-picker> </el-form-item> </el-col> </el-form-item> <el-form-item label="即時配送" prop="delivery"> <el-switch v-model="ruleForm.delivery"></el-switch> </el-form-item> <el-form-item label="活動性質" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox> <el-checkbox label="地推活動" name="type"></el-checkbox> <el-checkbox label="線下主題活動" name="type"></el-checkbox> <el-checkbox label="單純品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="特殊資源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="線上品牌商贊助"></el-radio> <el-radio label="線下場地免費"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活動形式" prop="desc"> <el-input type="textarea" v-model="ruleForm.desc"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')" >立即創建</el-button > <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </el-dialog> </div> </template> <script> export default { //接受父組件的值 data() { return { dialogTableVisible: false, dialogFormVisible: false, ruleForm: { name: "", region: "", date1: "", date2: "", delivery: false, type: [], resource: "", desc: "", }, rules: { name: [ { required: true, message: "請輸入活動名稱", trigger: "blur" }, { min: 3, max: 5, message: "長度在 3 到 5 個字符", trigger: "blur" }, ], region: [ { required: true, message: "請選擇活動區域", trigger: "change" }, ], date1: [ { type: "date", required: true, message: "請選擇日期", trigger: "change", }, ], date2: [ { type: "date", required: true, message: "請選擇時間", trigger: "change", }, ], type: [ { type: "array", required: true, message: "請至少選擇一個活動性質", trigger: "change", }, ], resource: [ { required: true, message: "請選擇活動資源", trigger: "change" }, ], desc: [{ required: true, message: "請填寫活動形式", trigger: "blur" }], }, formLabelWidth: "120px", }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); this.dialogFormVisible = false; }, }, }; </script> <style> </style>
