Vue slot插槽的使用


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽title>
head>
<body>

<div id="app">
    <shouhe>
        <up slot="slot1" :up_value="data_title">up>
        <down slot="slot2" :down_value="book" v-for="book in books">down>
    shouhe>
div>

<script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js">script>
<script>
    // 此处如果取名为content ,则 h1标签和 ul 标签就都会失效
    // 因此content标签也是 html 标签中的一个
    // 所以 html 本身拥有的标签不能使用
    Vue.component('shouhe', {
        template: "
" + "

" + " " + "

"
+ "
"
+ "
"
});//只能使用一个根标签,
//不能使用两个根标签
//属性名不要使用大写字母,因为浏览器会转成小写,导致一些问题 Vue.component('up', { props: ['up_value'], template: "{{up_value}}" }) Vue.component('down', { props: ['down_value'], template: "
  • {{down_value}}
  • "
    }) var vm = new Vue({ el: "#app", data: { data_title: "守鹤爱看的书", books: ['Java', 'Redis', 'Nginx'], } })
    script> body> html>

    你可能感兴趣的:(Vue,笔记,demo)