欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

在Vue中使用插槽

以下方法傳值存在兩個問題：
1.不能去掉外面包裹的標(biāo)簽
2.如果要傳值的太多，這種方法很搓很難閱讀

創(chuàng)新互聯(lián)是一家專業(yè)提供和林格爾企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站制作、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為和林格爾眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計公司優(yōu)惠進(jìn)行中。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <child content="<p>My name is Tom Cat</p>"></child>
</div>
<script type="text/javascript">
    Vue.component("child", {
        props: ["content"],
        template: `<div>
                        <p>hello</p>
                        <br/>//把html標(biāo)簽轉(zhuǎn)義顯示出來了：<br/><br/>
                        {{content}}<br/>
                        <br/>//正常渲染了html標(biāo)簽(也顯示了外面包裹的div)：
                        <div v-html='this.content'></div>
                        //而模版占位符template也不能去掉外面包裹的標(biāo)簽，而且整個都不渲染了：<br/>
                        <template v-html='this.content'></template>
                        <br/>
                    </div>`
    });
    var vm = new Vue({
        el: "#root"
    })
</script>
</body>
</html>

那用啥方法？用插槽??！
插槽的使用細(xì)節(jié)：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    <child>
        //這是插槽咯：
        <h2>world</h2>
    </child>

    //注意：content是保留關(guān)鍵字，不能用作組件，so 用my-content(用myContent這樣的駝峰命名會報錯)：
    <my-content1>
        <div class="header">header</div>
        <div class="footer">footer</div>
    </my-content1>

    <br>//具名插槽：
    <my-content2>
        <div class="header" slot="header">header</div>
        <div class="footer" slot="footer">footer</div>
    </my-content2>
</div>
<script type="text/javascript">
    Vue.component("child", {
        //props: ["content"],
        template: `<div>
                        <p>hello</p>
                        <slot>默認(rèn)內(nèi)容，當(dāng)父組件不傳遞插槽內(nèi)容的時候顯示</slot>
                    </div>`
    });

    Vue.component("my-content1", {
        //props: ["content"],
        template: `<div>
                        <slot></slot>
                        <div class='content'>hello</div>
                        <slot></slot>
                    </div>`
    });

    Vue.component("my-content2", {
        //props: ["content"],
        template: `<div>
                        <slot name="header">不給該插槽傳值，則顯示我</slot>
                        <div class='content'>hello</div>
                        <slot name="footer"></slot>
                    </div>`
    });

    var vm = new Vue({
        el: "#root"
    })
</script>
</body>
</html>

文章標(biāo)題：在Vue中使用插槽
分享路徑：http://chinadenli.net/article2/pijjic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、軟件開發(fā)、面包屑導(dǎo)航、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司