欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>