Vue篇——插槽slot简单实例

上代码






<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vuetitle>

head>
<body>

<div id="vue">

    <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>


<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js">script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js">script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js">script>

<script>

    //slot:插槽
    Vue.component("todo", {
        template: '
\ \
    \ \
\
'
}); Vue.component("todo-title", { props: ['title'], template: '
{{title}}
'
}); Vue.component("todo-items", { props: ['item'], template: '
  • {{item}}
  • '
    }); var vm = new Vue({ el: "#vue", data: { Title: "四月书屋", todoItems: ['Java', '数据库', '网络基础'] } });
    script> body> html>

    你可能感兴趣的:(前端开发,vue)