Vue组件之间的传参方式有三种
第一：父传子
第二：子传父
第三：兄弟之间相传
第一，父传子，顾名思义，外层组件传参给嵌套内部的组件
在父代中嵌套的标签
<son v-bind:toSon="fatherData"></son> //发送数据给子代 在子代中接收数据 需要添加一个属性叫做prpos
props:["toSon"],
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script type="text/javascript">
Vue.component("father",{
data:function(){
return {
fatherData:"我是你爸爸",
}
},
template:`
<div>
<h1>我是父代</h1>
<input type="text" v-model="fatherData">
<son v-bind:toSon="fatherData"></son>
</div>
`
})
Vue.component("son",{
props:["toSon"],
template:`<div>
<h1>我是子代</h1>
<span>这是我老爸说的话{{ toSon }}</span>
</div>`
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
第二，子传父，
子代传给父代需要使用方法，具体看代码注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script type="text/javascript">
Vue.component("father",{
data:function(){
return {
fatherData:"我是你爸爸",
msg:"",
}
},
methods:{
resSonData:function(data){ //父代用来接收子代传送的数据
this.msg = data;
}
},
template:`
<div>
<h1>我是父代</h1>
<span>这是我儿子说的话{{ msg }}</span>
<son v-on:toFatherSonData="resSonData"></son> //要在子代上面绑定方法
//这个v-on后面的参数是一个事件类型名称，=号后面的是方法名
</div>
`
})
Vue.component("son",{
data:function(){
return {
sonData:"我是你儿子",
}
},
methods:{
toFather(){ //子代向父代发送数据的方法
this.$emit("toFatherSonData",this.sonData);
// 第一个参数，这是我们自定义的事件类型名，不是方法
}
},
props:["toSon"],
template:`<div>
<h1>我是子代</h1>
<input type="text" v-model="sonData" @input="toFather">
</div>`
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
学完以上两种传参的方式，现在我们来用$refs和$parent两个方法来试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之间的传值-$refs&$parent</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<script type="text/javascript">
Vue.component("father",{
data:function(){
return {
fatherData:"我是父代组件中内容",
msg:"",
}
},
methods:{
chickSon:function(){
console.log(this.$refs.mySon.sonData);
}
},
template:`
<div>
<h1>我是父代</h1>
<button @click="chickSon">查看子代中内容</button>
<son ref="mySon"></son>
</div>
`
})
Vue.component("son",{
data:function(){
return {
sonData:"我是子代组件中内容",
}
},
methods:{
chickFather:function(){
console.log(this.$parent.fatherData)
}
},
template:`<div>
<h1>我是子代</h1>
<button @click="chickFather">查看父代中的内容</button>
</div>`
})
new Vue({
el:"#app",
})
</script>
</body>
</html>
第三，兄弟组件之间的参数传递
注意：兄弟组件传参必须依靠一个vue实例来进行，
关键方法：
$emit("参数名",callblack) 用来发送数据的方法
$on("参数名",callback) 用来接收数据的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>兄弟组件之间传递参数</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<bigbrother></bigbrother>
<hr>
<youngerbrother></youngerbrother>
</div>
<script type="text/javascript">
// 兄弟组件之间传值必须依靠外界
// 依靠新的一个vue的实例
var vm = new Vue();
Vue.component("bigbrother",{
data:function(){
return {
bigBrotherData:"这是哥哥说的话",
}
},
methods:{ //这是发送数据的方法,定义在methods里面
tellYoungerBrother:function(){
console.log(this)
vm.$emit(‘toYoungerBrother‘,this.bigBrotherData);//必须借用Vue的实例来完成数据的传递
}
},
created:function(){ //这是接收兄弟发来的信息，需要用一个方法来接收
//关键方法，$on
vm.$on(‘toBigBrother‘,function(data){
console.log(data)
})
},
template:`
<div>
<h1>我是哥哥</h1>{{ bigBrotherData }}
<button @click="tellYoungerBrother">发送给弟弟</button>
<h2>这是弟弟说的话:</h2>
</div>
`
})
Vue.component("youngerbrother",{
data:function(){
return {
youngerBrotherData:"这是弟弟说的话"
}
},
methods:{
tellBigBrother:function(){
vm.$emit("toBigBrother",this.youngerBrotherData);
}
},
created : function(){
vm.$on("toYoungerBrother",function(data){
console.log(data);
})
},
template:`<div>
<h1>我是弟弟</h1>
<button @click="tellBigBrother">发送给哥哥</button>
<h2>这是哥哥说的话:{{ }}</h2>
</div>`
})
new Vue({
el : "#app",
data : {
msg : "hello"
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/Godfather-twq/p/11815384.html
时间： 2024-08-03 18:58:03