精华内容
下载资源
问答
  • Vue组件——组件插槽

    2021-05-22 20:09:15
    组件插槽:vue提供的组件插槽,允许开发者在封装组件时,将不确定的需要额外自定义的部分定义为插槽。 1、匿名插槽组件插槽占位: <template> <div> <h4>组件插槽</h4> //<p&...

    组件插槽:vue提供的组件插槽,允许开发者在封装组件时,将不确定的需要额外自定义的部分定义为插槽。

    1、匿名插槽:

    组件内插槽占位:

    <template>
    	<div>
    		<h4>组件插槽</h4>
    		//<p>这是组件插槽示例</p>
    		<slot>
    		//slot在组件内占位
    		//如果slot内写dom结构及内容,则作为未替换时的默认值
    		</slot>
    	</div>
    </template>
    
    <script>
    export default {
      name="son"
    };
    </script>
    
    <style scoped>
    </style>
    

    使用组件时传入自定义内容:

    <template>
      <div>
        <son>
    		<p>
    			我是自定义内容
    			//匿名组件直接在组件标签里填写对应插槽的内容即可,里面的dom标签会被解析
    		</p>
    	</son>
      </div>
    </template>
    
    <script>
    import son from "./components/son"
    export default {
    	components:['son']
    };
    </script>
    
    <style>
    </style>
    

    2、具名插槽

    如果一个组件内有2处及以上需要外部传入标签自定义的地方,则需要具名标签。
    **注意:**具名标签的v-slot一般要跟template标签一起使用(template是html5新出的标签内容模板元素,它不会被渲染到页面上,一般会被vue解析内部标签)

    具名组件定义插槽:

    <template>
    	<div>
    		<h4>组件插槽</h4>
    		//<p>这是组件插槽示例</p>
    		<slot name="title">
    		//插槽1
    		</slot>
    		<p>插槽一结束,插槽二开始</p>
    		<slot name="content">
    		//插槽2
    		</slot>
    	</div>
    </template>
    
    <script>
    export default {
      name="son"
    };
    </script>
    
    <style scoped>
    </style>
    

    具名插槽使用:

    <template>
      <div>
        <son>
    		<template v-slot:title>
    			<h4>我是第一个插槽内容</h4>
    		</template>
    		
    		//v-slot可以简写为#,如下
    		<template #content>
    			<p>我是第二个插槽的内容</p>
    		</template>
    	</son>
      </div>
    </template>
    
    <script>
    import son from "./components/son"
    export default {
    	components:['son']
    };
    </script>
    
    <style>
    </style>
    

    3、作用域插槽

    子组件里的值需要给插槽赋值以便在父组件的环境下使用子组件的值

    插槽定义:

    <template>
    	<div>
    		<h4>组件插槽</h4>
    		<slot name="title" :row="obj">
    			//注意	row不是固定的,它是可以自定义的 不过推荐写row
    		</slot>
    	</div>
    </template>
    
    <script>
    export default {
      name="son",
      data(){
      	return {
    		obj:{
    			hello:world
    		}
    	}
      }
    };
    </script>
    
    <style scoped>
    </style>
    

    作用域插槽使用:

    <template>
      <div>
        <son>
    		<template v-slot:title="scope">
    			//注意同上面的row一样,scope是可以自定义的,它是一个对象,里面包含了插槽里定义的row即obj数据
    			<p>{{scope.row.hello}}</p>
    		</template>
    	</son>
      </div>
    </template>
    
    <script>
    import son from "./components/son"
    export default {
    	components:['son']
    };
    </script>
    
    <style>
    </style>
    
    展开全文
  • 组件代码 render() { <PortalsComponet>父组件的内容</PortalsComponet> } 子组件代码 export default class PortalsComponet extends Component { render() { return ( <div>子组件显示:{...

    就是将父组件标签的内容显示到子组件上

    父组件代码

    render() {
     <PortalsComponet>父组件的内容</PortalsComponet>
    }
    

    子组件代码
    export default class PortalsComponet extends Component {

    render() {
        return (
            <div>子组件显示:{this.props.children}</div>
        )
    }
    
    展开全文
  • vue组件化-插槽slot

    2021-05-24 20:06:17
    插槽:类似电脑的usb,使用接口给电脑增加不同的功能,键盘/音响,而不是直接在组件里添加 插槽的作用:为了让封装的组件具有扩展性 具体的使用方法: 1.在组件模板中添加一个插槽,可以存着默认值 <...

    插槽:类似电脑的usb,使用接口给电脑增加不同的功能,键盘/音响,而不是直接在组件里添加

    插槽的作用:为了让封装的组件具有扩展性

    具体的使用方法:

    1.在组件模板中添加一个插槽,可以存着默认值

        <template id='cpn'>
            <div>
                <h2>i am component</h2>
                <slot>
                    <!-- 默认值 -->
                    <button>submit</button>
                </slot>
            </div>
        </template>

    2.在组件中修改特定的内容

        <div id="app">
            <h1>{{msg}}</h1>
            <cpn>
                <button>案例1</button>
            </cpn>
            <cpn>
                <h5>---------</h5>
                <p>hello</p>
                <i>nihao</i>
            </cpn>
            <cpn>
                <span>hhhhh </span>
            </cpn>
            <cpn></cpn>
            <cpn></cpn>
        </div>

    效果如图

    具名插槽:当有多个插槽时,我们只想替换其中一个,就需要用到具名插槽了

     使用方法

    1.在模板中添加slot插槽,给插槽添加name属性

        <template id='cpn'>
            <div>
                <h2>i am component</h2>
                <slot  name='c'>
                    <span>center</span>
                </slot>
                <slot name='r'>
                    <span>right</span>
                </slot>
                <slot name='c'>
                    <span>right</span>
                </slot>
            </div>
        </template>

    2.在引用组件时,通过slot属性选择想要修改的插槽

        <div id="app">
            <cpn>
                <span>hhhh</span>
            </cpn>
            <cpn>
                <span slot="c">hh555555h</span>
            </cpn>
        </div>

    效果如图

    编译作用域:父组件模板的所有东西都会在父级作用域内编译;子组件模板的所有东西都会在子级作用域内编译

    根据下面例子理解:vue实例和组件里面都有isShow,但是在组件中使用的是vue实例里面的,因为组件被使用在vue实例里面

        <div id="app">
            <h1>{{msg}}</h1>
            <!--isShow 使用的是实例里面的isShow  -->
            <cpn v-show='isShow'></cpn>
        </div>
        <script>
            const app = new Vue({
                el: "#app",
                data: {
                    msg: "hello",
                    isShow: true
                },
                components: {
                    cpn: {
                        template: "#cpn",
                        data() {
                            return {
                                isShow: false,
                                list: ['python', 'javascript', 'java', 'go', 'c++']
                            }
                        }
                    }
                }
            })
        </script>

    作用域插槽:父组件替换插槽的标签,内容是由子组件提供

     使用方法

    1.在组件模板中v-bind绑定data=list,list是组件中data方法返回的一个数组

       <template id='cpn'>
            <div>
                <slot :data='list'>
                    <span>{{list}}</span>
                </slot>
            </div>
        </template>

    2.在ul中设置slot-scope属性,‘cpn’可以随意命名,

    3.通过v-for循环cpn里面的data(此data即组件模板中传过来的data)

        <div id="app">
            <cpn>
                <ul slot-scope='cpn'>
                    <li v-for='item in cpn.data'>{{item}}</li>
                </ul>
            </cpn>
        </div>

    效果如图

    展开全文
  • 组件中有插槽内容是显示插槽内容 当组间中没有插槽内容是,会默认显示slot中的插槽内容 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>...

    匿名插槽

    • 当组件中有插槽内容是显示插槽内容
    • 当组间中没有插槽内容是,会默认显示slot中的插槽内容

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <!-- 组件名称-->
            <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
            <my-component>插槽内容</my-component>
        </div>
    </body>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        //全局注册组件
        //第一个参数自定义标签名
        Vue.component('my-component', {
            template: `
                <div>
                    <slot><span>默认插槽内容</span></slot>
                </div>
            `
        })
        //创建vue实例
        var vm = new Vue({
            el: '#app',
            data: {
    
            },
            methods: {
    
            }
        })
    
    
    </script>
    
    </html>
    

    页面显示结果如下:
    在这里插入图片描述
    当组建中没有插槽内容是会默认显示slot中的内容
    在这里插入图片描述

    具名插槽

    • 有名字的插槽
    • slot中带有name的插槽

    代码如下(这里使用了2.6.0+新增的v-slot指令)

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <!-- 组件名称-->
            <my-component>
                <template #header>
                    <h1>页面头部</h1>
                </template>
                <template>
                    <h1>页面内容</h1>
                </template>
                <template #footer>
                    <h1>页面底部</h1>
                </template>
            </my-component>
        </div>
    </body>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        //全局注册组件
        //第一个参数自定义标签名
        Vue.component('my-component', {
            template: `
                <div>
                     <div class="container">
                        <header>
                            <slot name="header"></slot>
                        </header>
                        <main>
                            <slot></slot>
                        </main>
                        <footer>
                            <slot name="footer"></slot>
                        </footer>
                    </div>
                </div>
            `
        })
        //创建vue实例
        var vm = new Vue({
            el: '#app',
            data: {
    
            },
            methods: {
    
            }
        })
    
    
    </script>
    
    </html>
    

    页面显示结果如下:
    在这里插入图片描述

    作用域插槽

    • 父组件对子组件加工处理
    • 既可以复用子组件的slot,又可以使slot内容不一致

    代码如下(这里使用了2.6.0+新增的v-slot指令):

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
            <!-- 组件名称-->
            <my-component>
                <!--独占默认插槽  -->
                <!-- <template v-slot:default="slotProps">
                    姓名: {{slotProps.user.firstName+slotProps.user.firstName.lastName}}
                </template> -->
    
                <!--不带参数的 v-slot 被假定对应默认插槽:  -->
                 <!--独占默认插槽缩写形式+对象解构更简单  -->
                <template v-slot="{user}">
                    姓名: {{user.firstName+''+user.lastName}}
                </template>
    
            </my-component>
        </div>
    </body>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        //全局注册组件
        //第一个参数自定义标签名
        Vue.component('my-component', {
            data: function () {
                return {
                    user: {
                        lastName: '肖战',
                        firstName: '李'
                    }
                }
    
            },
            template: `
                <div>
                    <span>
                        <slot :user="user">{{ user }}</slot>
                    </span>
                </div>
            
            `
        })
        //创建vue实例
        var vm = new Vue({
            el: '#app',
    
            methods: {
    
            }
        })
    
    
    </script>
    
    </html>
    

    页面显示结果如下
    在这里插入图片描述

    展开全文
  • vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化 在我讲 vue 3.0 的普通组件的内容里,我提到了具名插槽发生了变化,我当时不清楚新的如何使用。今天查看了一些资料,终于搞明白了。 搞一个带具名...
  • 微信小程序自定义组件插槽的使用(一个简单的通用的上传图片的组件) 目录 微信小程序自定义组件插槽的使用(一个简单的通用的上传图片的组件) 1.子组件模板 2.父组件模板 3.父子组件传值 父传子: 子...
  • 如下,在父组件页面引入子组件,然后在子组件里面写上你要展示的内容。 这里定义一个按钮: <Child> <template> <div class="openButton" @click="toRecharge"> <span>充值</...
  • 组件间使用插槽

    2017-12-22 18:21:10
    1.列表项 在table表格里可以插入模板 模板里可以插入插槽 slot-cope可以放多个 作用域可以有多个属性 直接使用{{scope.row.属性名}}就可以显示多个 2 命名属性的名字的时候要以后台的接口文档的参数为准 要不然...
  • 为什么组件化 扩展 HTML 元素,封装可重用的代码 客户端在公司业务发展的过程中体积越来越庞大,其中堆叠了大量的业务逻辑代码,不同业务模块的代码相互调用,相互嵌套,代码之间的耦合性越来越高,调用逻辑会...
  • vue组件插槽

    2020-07-24 22:35:04
    但是插槽显示的位置是由子组件决定的,slot组件template的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。 2,slot 父组件...
  • 组件 一切皆组件、在页面中,不同区域用的是相同的HTML结构或者说是相同的模板,而在页面显示的是不同的数据,而这个就是组件,Vue中的组件化开发就是把页面分为不同的模板(组件),不同模板可以有不同的人开发,在...
  • 插槽的基本使用:在组件中使用slot标签,表示预留一个插槽,使用时在子组件标签里面写上标签即可 插槽的使用: 1、基本使用 2、插槽默认值 3、多个值替换插槽 具名插槽,根据插槽名字使用指定的插槽 .....
  • 文章目录bottom-modal组件引入组件组件样式隔离控制弹出层显示和隐藏组件wxml的slot插槽 参考: 组件样式隔离 组件wxml的slot bottom-modal组件 bottom-modal.wxml <!--components/bottom-modal/bottom-modal....
  • 插槽(slot) 是vue的一个内置组件,通过插槽,可以把自己想要的内容插入到组件的某个位置,有了插槽,可以让组件有更强的通用性。比如:子组件 A 位置默认显示文字,但是我们想在不同的组件内引用时,让 A 组件显示...
  • 组件插槽

    2021-03-16 15:23:54
    父传子 注意:在dom元素中,props属性名不能用驼峰,用a-b代替组件名如果是驼峰,在dom中也用a-b代替。
  • Vue组件-插槽

    2019-11-11 19:04:29
    组件插槽是为了让我们封装的组件更加具有扩展性,让使用者可以决定组件内部的一些东西到底展示什么。比如,移动网站中的导航栏。在移动开发中,几乎每个页面都有导航栏,这种导航栏我们必然会封装成一个插槽,比如...
  • 组件化开发核心思想:把不同的功能封装到不同的组件中,然后组件通过组合的方式形成完整意义上的应用。 组件注册 注意事项 组件参数的data值必须是函数,return一个对象。 原因:使用函数会形成一个闭包的环境,...
  • 这几天在一个list组件的时候遇到一点问题。话不多说,上代码。 part1:使用 List 组件循环 ListItem组件 <template> <div style="border: 5px solid blue;padding: 10px 50px;"> <h2 style=...
  • 当我们在一个组件进行多个组件的切换的时候,我们就能使用动态组件--也可以使用if-else-if但是这种太过繁琐。 作用: 使用动态组件能提高性能。会涉及到component内置组件。 具体的步骤: 1.引入组件--数据...
  • 组件就是把各自独立的积木拼成一个整体进行数据交互 1. 全局注册 组件注意事项 全局组件 注册后,任何 vue实例 都可以用 组件参数的data值必须是函数同时这个函数要求返回一个对象 组件模板必须是单个根元素 组件...
  • 动态组件-插槽

    2021-07-05 20:26:52
    1.动态组件 目标: 多个组件使用同一个挂载点,并动态切换,这就是动态组件 场景:: 同一个挂载点要切换 不同组件 显示 创建要被切换的组件 - 标签+样式 引入到要展示的vue文件内, 注册 变量-承载要显示的组件名 ...
  • 组件通信与slot插槽

    2019-06-25 20:42:10
    组件通信 为什么要进行组件通信? 组件可以说是一个具有独立功能的整体,但是当我们要将这些组件拼接在一起时,这些组件相互之间要建立联系 ,这个联系我们就称之为通信 组件通信的方式有以下几种 父子组件通信 使用...
  • 1、非父子组件传值的问题 1、Vue是一种轻量级的视图层的框架,那么遇到复杂的非父组件传值的问题我们有两种解决方法:总线机制和vuex。 1.1、总线机制 1、总线也可以叫做(Bus/总线/发布订阅模式/观察者模式) ...
  • Vue组件插槽笔记

    2020-01-22 15:23:31
    1.普通插槽组件写法: <ShoppingCar> <button>按钮</button> </ShoppingCar> 子组件写法: <template> <slot> <span>默认为span</span> </slot> ...
  • vue父子组件slot插槽

    千次阅读 2019-11-05 16:37:04
    关于父组件在使用子组件的时候,向子组件插入内容的方法 1 创建一个子组件,并在vue实例中注册 这是创建子组件 var testzujian = { template:`<div> <span>这是子组件的内容</span> </div&...
  • 1.组件插槽 2.具名插槽

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,365
精华内容 2,946
关键字:

组件里面写插槽