Vue事件分发

最新推荐文章于 2024-06-28 09:44:50 发布

Wogna

最新推荐文章于 2024-06-28 09:44:50 发布

阅读量276

点赞数 1

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44999951/article/details/125051709

版权

笔记专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Vue事件分发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot插槽&事件分发</title>
</head>
<body>

<!--定义好盒子内容-->
<div id="slot">
    <!--  指定插入位置slot="one"
          v-bind绑定props元素给props元素属性赋值
          再将已经有值的组件插入指定slot插槽
          （我认为slot就是一个占位符~）
     -->
    <slott>
        <!--  slot绑定<slot>里边定义好的name值 指定要插入的位置 -->
        <one1 slot="one" v-bind:slot1="message"></one1>
        <two2 slot="two" v-for="(item,index) in Items" :slot2="item" :index="index" v-on:remove1="remove(index)"></two2>
    </slott>
</div>

<!--导入组件-->
<script src="https://lib.baomitu.com/vue/2.6.14/vue.common.dev.js"></script>

<script>
    //定义插槽
    Vue.component("slott",{
        template: '<div>' +
            '<slot name="one"></slot>' +   //定义插槽 name属性为one
            '<ul>' +
            '<slot name="two"></slot>' +   //定义插槽 name属性为two
            '</ul>' +
            '</div>'
    });
    //定义第一个要插入的组件one1
       Vue.component("one1",{
            props:["slot1"],
            template: '<p>' +
                '{{slot1}}' +
                '</p>'
        });
    //定义第二个要插入的组件two2
    Vue.component("two2",{
        props:["slot2","index"],
        template: '<li>' +
            '{{index}}---{{slot2}}' +
            '<button @click="remove1()">删除</button>' +     //设置删除按钮 v-on事件绑定
            '</li>',
        methods:{
            remove1:function (){
                //this.$emit(自定义事件名,参数)
                this.$emit('remove1',index)
            }
        }
    })

    //定义Vue对象
    var vm = new Vue({
        el:"#slot",
        data:{
            message:"nihao",
            Items:['张三','李四','王五']
        },
        methods:{
            remove:function (index){
                console.log(index)
                this.Items.splice(index,1)
            }
        }
    })
</script>
</body>
</html>

我理解的自定义分发事件就是在组件里用 this.$emit(自定义事件名,参数) 在组件里定义一个事件，然后用这个事件调用Vue实例里的方法，来实现在组件作用域办不了的事。
这章感觉狂老师讲的优点乱，里边很多的index其实都是可以删除的，具体原因好像是因为v-for循环遍历的时候index已经被Vue实例里的方法给读取了，所以有些index可有可无。

Wogna

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue事件分发

Vue事件分发<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot插槽&事件分发</title></head><body><div id="slot"> <!-- 指定插入位置slot="one"
复制链接

扫一扫

专栏目录