vue自定义事件

最新推荐文章于 2022-06-02 14:48:22 发布

年轻的猴

最新推荐文章于 2022-06-02 14:48:22 发布

阅读量137

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_42388853/article/details/109408879

版权

本文介绍了Vue中组件间的数据绑定和事件处理机制。通过v-bind传递数据，使用props接收，借助v-on与this.$emit实现组件与父组件的通信，结合方法处理删除操作。示例展示了如何在zsp-item组件中触发remove事件，调用父组件的removeItems方法删除列表项。

摘要由CSDN通过智能技术生成

还没开始先说说这些属性代表的意义：
v-bind：是用于绑定前端界面和vue的数据
props：绑定前端与组件的数据 (props属性在视图层标签里传的值是标签内的值，例如item
this.$emit：将事件从组件分发回前端界面
v-on:将事件给vue里的method处理
key：将index索引返回到vue

接下来要做的事的过程：
1使用slot绑定了组件里面的内容分发中的组件zsp-item
2然后在把索引利用v-bin传回组件zsp-item中
3组件里面使用.$emit再传回视图层
4然后调用vue里面的方法获取到视图层得到的index进行删除
值得关注的一点就是method方法里的方法不需要再冒号然后再加上function

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


<!--                使用slot绑定了组件里面的内容分发中的组件zsp-item-->
<!--                然后在把索引利用v-bin传回组件zsp-item中-->
<!--                组件里面使用.$emit再传回视图层-->
<!--                然后调用vue里面的方法获取到视图层得到的index进行删除-->
        <zsp-item slot="zsp-item" v-for="(item,index) in items" v-bind:item="item"
                  v-bind:index="index" v-on:remove="removeItems(index)" >

        </zsp-item>
    </zsp>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("zsp",{

        template:'<div>\
        <slot name="zsp-title"></slot>\
        <ul>\
        <slot name="zsp-item"></slot>\
        </ul>\
        </div>'
    });
    Vue.component("zsp-title",{
        props: ['title'],
        template: '<div >{{title}}</div>'
    });
    Vue.component("zsp-item",{
        props:['item','index'],
        template:'<li>{{item}}  <button @click="remove">删除</button></li>',
        methods:{
            remove:function(index){
                // 将从props里面获取到的索引返回给视图层
                this.$emit('remove',index)

            }
        }
    })
    var vm =new Vue({
        el:'#app',
        data:{
            title:"朱少鹏会的语言",
            items:["c++","java","python"]
        },
        methods: {
            removeItems(index){
                this.items.splice(index,1)
            }
        }
    });


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

大家可以自行复制到记事本里面试试效果应该是一样的

年轻的猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义事件

还没开始先说说这些属性代表的意义：v-bind：是用于绑定前端界面和vue的数据props：绑定前端与组件的数据 (props属性在视图层标签里传的值是标签内的值，例如itemthis.$emit：将事件从组件分发回前端界面v-on:将事件给vue里的method处理key：将index索引返回到vue接下来要做的事的过程：1使用slot绑定了组件里面的内容分发中的组件zsp-item2然后在把索引利用v-bin传回组件zsp-item中3组件里面使用.$emit再传回视图层4然后调用
复制链接

扫一扫