子组件向父组件传递

2019-11-23 09:02:10 阅读：206 来源： 互联网

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<!--
v-on不仅仅可以用于监听dom事件，也可以用于组件间的自定义事件
自定义事件的流程：
在子组件中，通过$emit()来触发事件
在父组件，通过v-on来监听子组件事件
-->

<!--父组件模板-->
<div id="app">
    <cpn @itemclick="cpnclick"></cpn><!--使用自定义事件-->
</div>
<body>

<!--子组件模板-->
<template id="cpn1">
    <div>
       <button v-for="item in categories" @click="btnclick(item)">
           {{item.name}}
       </button>
    </div>
</template>


<script src="vue.js"></script>
<script>
    // <!-- 子组件-->
    const cpn={
        template: '#cpn1',
       data(){
            return {
                categories:[
                    {id:'aa',name:'热门推荐'},
                    {id:'bb',name:'手机数码'},
                    {id:'aa',name:'热门推荐'},
                    {id:'aa',name:'热门推荐'},
                    {id:'aa',name:'热门推荐'}
                ]
            }
       },
        methods:{
            //发射事件
            btnclick(item){
                // this.$emit('itemclick')
                this.$emit('itemclick',item)/*当有item参数时就会默认将其 传递过去*/
            }
        }
    };
    //父组件
    const app=new Vue({         /*看成root组件*/
        el:'#app',
        data:{
            info:{
                name:'why',
                age:19,
                height:22
            }
        },
        components:{
            cpn
        },
        methods: {
            cpnclick(item){
                console.log(item )
            }
        }
    })
</script>
</body>
</html>

标签：aa,name,向父,emit,传递,item,组件,id
来源： https://www.cnblogs.com/Damocless/p/11915267.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

子组件向父组件传递