自定义事件内容分发【狂神Vue p11】

最新推荐文章于 2023-02-20 16:57:48 发布

Cyril-zxy

最新推荐文章于 2023-02-20 16:57:48 发布

阅读量77

点赞数

本文链接：https://blog.csdn.net/weixin_43660497/article/details/119284624

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

狂神老师用的变量名不容易区分，我改了一下更好理解一些。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--我用的本地的-->
    <script type="text/javascript" src="./vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <!--导入vue.js-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->

</head>



<body>

<!--view层-->
<div id="app">
    <!-- 目标样式
        <p>列表书籍</p>
        <ul>
            <li>java</li>
            <li>py</li>
            <li>vue
            </li>
        </ul>
    -->

    <!--前端    使用了插槽-->
    <todo>
        <todo-title slot="todo-title" :title="标题"></todo-title>

        <!--前端绑定一个事件，通过事件去掉Vue实例的方法-->
        <todo-items slot="todo-items" v-for="(元素,下标) in todoItems"
                    :item="元素" :index="下标"
                    v-on:remove事件="removeItems方法(下标)"></todo-items>
    </todo>


</div>






<script>

//组件
    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'],
        //只能绑定当前事件的方法             //拿不到new Vue中的方法
        template: '<li>-{{index}}-{{item}}    ' +
            '<button @click="remove">删除</button></li> ',
        methods:{
            remove:function (下标){
                alert("删除触发");
                this.$emit('remove事件',下标);
            }
        }

    });




//VUE实例
    var vm=new Vue({
        el: "#app",
        data: {
            标题: "列表",
            message: "hello,zxy",
            todoItems:['ks','zxy','bbbb'],

        },

        methods: {
            removeItems方法:function (index){
                console.log("删除了"+this.todoItems[index]+"元素成功！");
                //一次删除一个元素 从当前下标开始，删除1个元素
                this.todoItems.splice(index,1);
                //alert("删除选中的元素");

            }
        }



    });

</script>




</body>
</html>

Cyril-zxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
自定义事件内容分发【狂神Vue p11】

狂神老师用的变量名不容易区分，我改了一下更好理解一些。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script type="text/javascript" src="./vue.min.js"></script>
复制链接

扫一扫