vue子组件向父组件传值的问题

<div id="app">

    <cpn1 @chuansong="cpnClick"></cpn1>
    <!--在父组件中绑定点击事件,这里绑定的是自定义事件,名字要是 @子方法名字 = "父方法名字"-->

</div>
<template id="cpn1">
    <!--<h1 >{{one}}</h1>-->
    <div>
        <!--给子组件的内容绑定事件-->
        <button v-for="item in person" @click="btnClick">{{item.name}}</button>

    </div>

</template>
<script>


    const cpn1 = {
        template : '#cpn1',
        //值绑定
        //props: ['one']
        data(){
            return {
                person: [
                    {id : 'zhangsan',name : 'zhanghsan'},
                    {id : 'lisi',name :'lisi'}
                ]
            }
        },
        //第一是在子组件内写好click事件,用 this.$emit()去发射给父组件,
        methods: {
            btnClick(item){
                console.log(item);
                this.$emit('chuansong',item)
            }
        }
    }


    const app = new Vue({
        el: '#app',
        data: {
            hobbies:['1','2','3'],
        },
        components:{
            cpn1 : cpn1
        },
        methods: {
            //父组件接收子组件发射的请求
            cpnClick(item){
                console.log('1111'+item)
            }
        }
    })
</script>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值