其他分享
首页 > 其他分享> > vue组件 事件(极客时间Vue视频笔记)

vue组件 事件(极客时间Vue视频笔记)

作者：互联网

vue组件核心:事件

 

<body>
    <div class="app">
        <todo-list></todo-list>
        {{message}}--{{message+','+message}}
        <div :id='message' v-if="showMessage">{{title}}</div>
        <div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div>
        <div :id='message' v-show="showMessage">{{title}}</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('todo-item', {
            props: {
                title: String,
                prize: {
                    type: Number,
                    default: 40
                }
            },
            template: `<li>
            <button @click="handleClick">删除</button>
                课程名:{{title}}
                价格:{{prize}}
            </li>`,
            data: function () {
                return {}
            },
            methods: {
                //按钮点击事件
                handleClick(){
                    console.log("handleClick");
                    //向父组件的@delete事件传递this.title参数,在父组件中delete(var){}即可接收到此参数
                    this.$emit('delete',this.title);
                }
            }
        })
        Vue.component('todo-list', {
            template: `
            <ul>
            <todo-item @delete="handleDelete" v-for="item in classList" :title="item.title" :prize="item.prize"></todo-item>
        </ul>
            `,
            methods:{
                //@delete对应的事件
                handleDelete(val){
                    console.log("handleDelete",val);
                }
            },
            data: function () {
                return {
                    classList: [
                        {
                            title: '课程1',
                            prize: 50

                        },
                        {
                            title: '课程2',
                            prize: 80
                        }
                    ]
                }
            }
        })
        var vm = new Vue({
            el: '.app',
            data: {
                message: 'hello world',
                showMessage: false,
                title: "是否删除",

            }
        })
    </script>
</body>

 

 

 

 

标签：vue,prize,title,Vue,事件,message,delete,极客
来源： https://www.cnblogs.com/RoronoaZoro/p/11965184.html