首先我们先定义3个页面,一个主页面,两个子页面
例:myForm 和 myTabel 是定义的两个子页面
第一步:在主页面引入
import myForm from "@/MyForm"; import myTabel from "@/MyTable";
第二步:在 components 注册 (注册完必须进行第三步。不然会报错)
components: { myForm, myTabel, }
第三步:插入
<myForm></myForm> <myTabel></myTabel>
传值方法-----------
父传子
例:我在data里定义了一个list的数据;
list: [ { id: 1, name: "铁柱", age: 18, sex: "男" }, ]
第一步:传递数据
<myTabel :parentData="list"></myTabel>
:子页面去接收的名字=‘需要传入过去的名字‘
第二步:子页面接收数据
props: [‘parentData‘]
子传父
例:
第一步:定义一个事件
<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button>
第二步:在methods写入方法
methods: { updateBtn(id) { this.$emit("update-data", id); } }
()里,第一个参数是父页面需要接收的事件名字,第二个参数是你需要传过去的数据。
第三步:父页面接收
<myTabel :list="list" @update-data="updateData"></myTabel>
接收使用@,第一个值在子页面定义的名字, 后面的是本页面自己定义的事件名,通过事件,拿到值
兄弟传值
首先我们在main.js定义一个方法
Vue.prototype.方法名 = new Vue()
页面一
<el-button type="primary" @click="updateBtn(item.id)">确 定</el-button> methods: { updateBtn(id) { this.public.$emit("update-data", id); } }
同理,先定义一个事件,然后, 使用 this.public.$emit("第二个页面需要接收的名字","第二个值是传的数据") 传入数据
页面二
例:在created生命周期函数里接收
created(){ This.public.$on(‘update-data’, value=>{ console.log(value) 取值 }) }
this.public.$on("第一个上个页面定义的名字","第二个是一个函数(参数1:上个页面传过来的数据)")
原文地址:https://www.cnblogs.com/yetiezhu/p/12602486.html
时间: 2024-10-09 16:31:47