vue页面向组件传参,组件向外传参

页面中

<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>