Vue：计算属性，【内容分发】，自定义事件

1.内容分发[slot]

11_09_第六阶段：大前端进阶||07-Vue详解||P11：插槽slot【Vue的缩写】【观看狂神随笔】_插槽slot


11_09_第六阶段：大前端进阶||07-Vue详解||P11：插槽slot【Vue的缩写】【观看狂神随笔】_Java_02

2.代码演示

第一步: 定义一个待办事项的组件

<div id="vue">
    <todo></todo>
</div>

<script type="text/javascript">
    Vue.component('todo', {
        template: '<div>\
                    <div>待办事项</div>\
                    <ul>\
                        <li>学习狂神说Java</li>\
                    </ul>\
               </div>'
    });
</script>

第二步: 我们需要让,待办事项的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽、

  • 将上面的代码留出一个插槽,即 slot
Vue.component('todo', {
    template: '<div>\
                    <slot name="todo-title"></slot>\
                    <ul>\
                        <slot name="todo-items"></slot>\
                    </ul>\
               </div>'
});

第三步：定义一个名为 todo-title 的待办标题组件 和 todo-items 的待办内容组件

Vue.component('todo-title', {
    props: ['title'],
    template: '<div>{{title}}</div>'
});
//这里的index,就是数组的下标,使用for循环遍历的时候,可以循环出来!
Vue.component('todo-items', {
    props: ['item', 'index'],
    template: '<li>{{index + 1}}. {{item}}</li>'
});

第四步：实例化 Vue 并初始化数据

var vm = new Vue({
    el: '#vue',
    data: {
        todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
    }
});

第五步：这些值,通过插槽插入

  • 说明:我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中
var vm = new Vue({
    el: '#vue',
    data: {
        todoItems: ['狂神说Java', '狂神说运维', '狂神说前端']
    }
});

Vue的缩写

11_09_第六阶段：大前端进阶||07-Vue详解||P11：插槽slot【Vue的缩写】【观看狂神随笔】_Vue_03

完整代码

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


<div id="app">

<!--<p>列表书籍</p>
    <ul>
        <li>Java</li>
        <li>Linux</li>
        <li>Python</li>
    </ul>-->
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>

</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--导入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    //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'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "黑神",
            todoItems: ['黑神说Java','黑神说Vue']
        }
    });
</script>

</body>
</html>

效果

11_09_第六阶段：大前端进阶||07-Vue详解||P11：插槽slot【Vue的缩写】【观看狂神随笔】_vue.js_04