Vue学习15----父组件主动获取子组件的数据和方法，子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法：
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>
