Vue自学：组件子传父操作

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Vue自学：组件子传父操作</title>
</head>
<body>
    <!-- 这里是个父组件 -->
    <div id="app">
        <!-- 使用v-on，但是绑定的属性是this.$emit所发送过去的监听事件，并非普通的click事件 -->
        <cpn v-on:item-click="cpnclick"></cpn>
    </div>
</body>
    <!-- 这里是子组件模板 -->
<template id="cpn">
    <div>
        <!-- 这里所使用的categories，是data这个函数内的遍历对象 -->
        <!-- v-on:click事件，用于绑定一个item,发送给父组件 -->
        <button v-for="item in categories" v-on:click="selfbtn(item)">{{item.name}}</button>
    </div>
</template>
<script type="text/javascript">
    //子组件
    const cpn = {
        //  绑定模板
        template:'#cpn',
        // 设置数据：必须为函数格式
        data(){
            // 返回的是一个数组对象类型的数据
            return {
                categories:[
                    {id:'aaa',name:'kai'},
                    {id:'bbb',name:'da'},
                    {id:'ccc',name:'liang'},
                    {id:'ddd',name:'bian'}
                ]
            }
        },
        methods:{
            //绑定了点击时间，形参为item
            selfbtn(item){
                //this.$emit('绑定新的事件','传递过去的值')
                this.$emit('item-click',item)
            }
        }
    }
    //父组件
    const app = new Vue({
        el:'#app',
        data:{
        },
        components:{
            //绑定的对象增强写法
            cpn
        },
        methods:{
            //将item传递过来
            cpnclick(item){
                console.log('cpnclick',item)
            }
        }
    })
</script>
</html>
相关文章
