vue页面向组件传参,组件向外传参
程序员文章站
2024-03-15 11:22:53
...
页面中
<template>
<div>
<item @gochild="to" v-for="(theStr,index) in arr ":key="index" :str="theStr"></item> //str传到组件里去 @gochild自定义事件,用于接收组件向页面所传的参数(名字随意)
</div>
</template>
<script>
import Item from "../components/Item"; //引入页面需要用的组件
export default {
name: "Shop",
data(){
return{
arr:['san','si','wu','liu']
}
},
components:{
Item
},
methods:{
to(arg) { //arg就是组件传过来的值
console.log(arg)
}
}
}
</script>
<style scoped>
</style>
2.组件中
<template>
<div> //组件内定义事件真正的事件
<span @click="btn(str)">{{str}}</span> //str是页面传过来的值
</div>
</template>
<script>
export default {
name: "Item",
//1.页面向组件传参
props:{
str:String
},
methods:{
btn(theStr){ //向页面传参,第一个参数为页面的事件,第二个参数是想传过去的值
this.$emit('gochild',theStr)
}
}
}
</script>
<style scoped>
</style>
第二种组件向外传参
<template>
<div> //直接用变量的方式传方法
<item :theFn="to" v-for="(theStr,index) in arr ":key="index" :str="theStr"></item>
</div>
</template>
<script>
import Item from "../components/Item";
export default {
name: "Shop",
data(){
return{
arr:['san','si','wu','liu']
}
},
components:{
Item
},
methods:{
to(arg) {
console.log(arg)
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
<span @click="btn(str)">{{str}}</span>
//<span @click="theFn(str)">{{str}}</span> //或者直接用外面传来的方法把值带出去
</div>
</template>
<script>
export default {
name: "Item",
//1.页面向组件传参
props:{
str:String,
theFn:Function //组件内接受页面传来的方法
},
methods:{
btn(theStr){ //组件内调用这个方法把值传过去
// this.$emit('gochild',theStr)
this.theFn(theStr)
}
}
}
</script>
<style scoped>
</style>
上一篇: uniapp/vue 组件之间的传值
下一篇: Docker 之间如何共享数据?