Vue 15-具名插槽、作用域插槽

一.具名插槽


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>插槽slottitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="root">
        <body-content>
            
            <div class="header" slot="header">I am headerdiv>
            <div class="footer" slot="footer">I am footerdiv>
        body-content>
    div>
    <script>
        Vue.component('body-content', {
            // 通过使用具名插槽
            template:`
content
defalut ftext
`
}) var vm = new Vue({ el: '#root', })
script> body> html>

二.作用域插槽


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <script src="./js/vue.js">script>
head>
<body>
    <div id="root">
        <child>
            <template slot-scope="props">
                <li>{{props.item}}li>
            template>
        child>
    div>
    <script>
        Vue.component('child', {
            data: function(){
                return {
                    list: [1,2,3,4]
                }
            },
            template: `
`
}) var vm = new Vue({ el: '#root', })
script> body> html>

你可能感兴趣的:(Vue)