父给子
第一种 props 缺点：只能一级一级的传值 子页面不能修改这个参数
父页面
<template>
<div >
<h1>主页面</h1>
<hr />
<vue1 :x1x2="传达参数"></vue1> //这里自己写或者给定义变量
</div>
</template>
data() {
return {
x1x2: "asdasdasd" //这里可以定义
};
}
子页面 这样就能获取参数 随便一个地方就能从console.log()出来
export default {
props:{
x1x2:{}
}
}
第二种 this.$parent 子页面直接获取父的变量
父页面只需要data
data() {
return {
ccc:"000000"
};
}
子页面
console.log(this.$parent.ccc) 就能获取
父给孙 （父给所有的下面页面直接给值）
provide 依赖
父页面创建好
export default {
provide() { //依赖 可以父给下面的子、孙等页面直接传值
return {
x1x2:"000000"
};
}
}
子 就拿到了
export default {
inject:['x1x2']
}
子给父
第一种 需要子页面关闭或者改变才传值
子页面
<div>
<h2>这是vue1页面</h2>
<botton @click="dianji">点击</botton>
</div>
export default {
data(){
return{
ddd:"22222"
}
},
methods:{
dianji(){
this.$emit('change',this.ddd); //发送
}
}
}
父页面
<div >
<h1>主页面</h1>
<vue1 @change="ddd"></vue1>
</div>
methods: {
ddd( val ){ //val 传来的值
console.log("父的打印机")
console.log(val)
},
}
第二种 this.$children
子页面
定义好变量名，父页面直接拿
父页面
mounted(){
console.log("父页面自动获取")
//children[0]的是意思是第1个页面，可能父页面有多个子页面，按代码写的子页面先后顺序
this.ccc = this.$children[0].ddd;
console.log(this.ccc)
},
第三种 ref
子页面
<div>
<h2>这是vue1页面</h2>
<botton @click="dianji">点击</botton>
</div>
export default {
data(){
return{
ddd:"22222"
}
},
methods:{
dianji(){
this.$emit('change',this.ddd); //发送
}
}
}
父页面
<div >
<h1>主页面</h1>
<vue1 ref='childsss'></vue1>
</div>
mounted(){
console.log("父页面自动获取")
console.log(this.$refs.childsss.ddd) // ddd 是变量，可以换取决于子页面的变量名
},
