动态组件

发布时间:2021-06-22 22:28:14 浏览量:104 标签: 动态组件

动态组件:

            在使用组件的时候更灵活:

                1.在下边声明n个组件

                    在加载组件的时候,我们通常使用<组件名></组件名>的方式使用,这种方法使用

                    只能使用固定的组件

                2.我们需要灵活使用组件,需要在使用组件的时候,使用 component 标签

                    <cpmponent :is="变量"></component>

                    data:{

                        变量:'组件名'

                    }


                    vue 是操作数据的 可以通过方法 控制data中该变量变化


  插槽:

            使用插槽可以让使用组件的人决定组件中的内容


            <template id="demo">

                死的代码

            </template>


            变成

            <template id="demo">

                <div>

                    布局...

                        定义插槽

                        <slot></slot>

                    布局...

                </div>

            </template>


            <组件名>

                要插入到插槽中的内荣

            </组件名>


            具名插槽:就是给插槽命名了

            <组件名>

                <元素 slot="a1"></元素>

                <元素 slot="a2"></元素>

                <元素 slot="a3"></元素>

            </组件名>

            <template>

            <div>

                <元素> <slot name="a2"></slot></元素>

                <slot name="a1"></slot>

               <元素></元素>

                <slot name="a3"></slot>

            </div>

            </template>


        插槽传值:

            接收:slot-scope = "自定义属性"

            <template>

                数据

                元素 v-for

                传值

                <slot :list=[v.is,v.name]></slot>

            </template>

           

            组件中的数据:

                data(){

                    return{

                        

                    }

                }



搜索
关于我
吴英赫
最新标签
推广