zoukankan      html  css  js  c++  java
  • Vue自定义组件插入值

     我们自定义组件的时候有时候需要往组件里面插一些内容:

    //定义一个组件test,插值内容用slog来代替
    export default {
       name: 'test',
       template:`
            <div>
                <div>这里是test组件</div>
                <slot name="content1"></slot>
                <slot name="content2"></slot>
            </div>
        ` 
    }

    调用组件的时候

    new Vue({
       el: '#app',
       components: { test },
       template:`
            <div>
                <test>
                    <div slot="content1">这是插值内容1</div>
                    <div slot="content2">这是插值内容2</div>
                </test>
            </div>
        ` 
    }) 

    当然我们也可以不定义slotName全部引入

    //定义一个组件test,插值内容用slog来代替
    export default {
       name: 'test',
       template:`
            <div>
                <div>这里是test组件</div>
                <slot></slot>
            </div>
        ` 
    }

    slot没有name属性的时候就会插入那些没有slot属性的插入内容,例如下面的’这是插值内容2‘会被插入到<slot></slot>的位置,但是‘这是插值内容1’就不会被插入了

    new Vue({
       el: '#app',
       components: { test },
       template:`
            <div>
                <test>
                    <div slot="content1">这是插值内容1</div>
                    <div>这是插值内容2</div>
                </test>
            </div>
        ` 
    }) 
  • 相关阅读:
    vue+element实现图片上传
    react----Hooks的基本使用
    js知识点大杂烩
    vue面试题(一)
    从一个字符串中找出重复次数最多的字符?
    百度搜索
    js--拖拽
    js循环嵌套,打印图形
    js--sort()排序
    闰秒调整扫盲
  • 原文地址:https://www.cnblogs.com/amiezhang/p/8409470.html
Copyright © 2011-2022 走看看