Vue this.$emit 自定义事件分发

 

 

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

<todo>
    <todo-title slot="todo-title" :title="title"></todo-title>
    <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                :item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
</todo>

</div>

<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //slot 插槽
    Vue.component("todo",{
        template:
        '<div>\
            <slot name="todo-title"></slot>\
             <ul>\
                <slot name="todo-items"></slot>\
            </ul>\
        </div>'
    });

    Vue.component("todo-title",{
        props:['title'],
        template:'<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props:['item','index'],
        //只能绑定当前组件的方法
        template:'<li>{{index}}----{{item}} <button @click="remove">delete</button> </li>',
        methods:{
            remove:function (index) {
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    })

    var vm=new Vue({
        el:"#app",
        data:{
            title:"创客未来",
            todoItems:['创客','未来','中国']
        },
        methods:{
            removeItems:function (index) {
                this.todoItems.splice(index,1);//一次删除一个数组元素
            }
        }

    });

</script>
</body>
</html>

Vue的核心：数据驱动、组件化。

Vue的优点：借鉴了AngulaJS的模块化和React的虚拟DOM，虚拟DOM就是把DOM操作放到内存中执行。

Vue常用属性：

　　v-if

　　v-else-if

　　v-else

　　v-for

　　v-on 绑定事件，简写 @

　　v-model 数据双向绑定

　　v-bind 给组件绑定参数，简写 ：

Vue 组件化

　　组合插件 slot插槽

　　组件内部绑定事件需要使用到 this.$emit("事件名",参数)；

　　计算属性的特色，缓存计算数据

遵循SoC关注分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，需要使用Axios框架做异步通信；

注意：

Vue的开发都是要基于NodeJS，实际开发采用  vue-cli 脚手架开发，vue-router路由，vuex做状态管理，Vue UI，界面我们一般使用 ElementUI（饿了么出品），或者ICE（阿里巴巴）来快速搭建前端项目。

官网：

https://element.eleme.cn/#/zh-CN

https://ice.work/

 

posted @ 2021-01-23 07:21  创客未来  阅读(924)  评论(0)    收藏  举报