标签：item 是你 页面 new list val 自己 ola nts
首先我们先定义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：上个页面传过来的数据）")
标签：item 是你 页面 new list val 自己 ola nts
原文地址：https://www.cnblogs.com/yetiezhu/p/12602486.html
