Vue 自定义组件 —

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

一、默认插槽

<div class="category"><h3>{{title}}分类</h3><slot>插槽，当使用者没有传递具体介都时出现</slot>        <!--声明插槽-->
</div>

<div class="container"><CateGory title='美食'><img src="./img/asd.jpg" alt="" style="width: 100%;"/>  <!--使用插槽--></CateGory>
</div>

二、具名插槽声明插槽时指定name属性用于区别每个插槽便可以声明多个插槽

<div class="category"><h3>{{title}}分类</h3><slot name='center'>center插槽，当使用者没有传递具体介都时出现</slot><slot name='footer'>footer插槽，当使用者没有传递具体介都时出现</slot>
</div>

使用时也要指定使用的是哪一个插槽，使用插槽时用slot属性或v-slot属性指定定义时的name值，但是v-slot只能使用在<template>节点中
一个插槽可以使用多次但是并不推荐可以使用<template>节点包裹起来

<div class="container"><CateGory title='美食'><img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/><a slot="footer" href="http://www.baidu.con">美食广场</a></CateGory><CateGory title='游戏'><img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/><img slot="center" src="./img/asd.jpg" alt="" style="width: 100%;"/></CateGory><CateGory title='电影'><template v-slot:center><img src="./img/asd.jpg" alt="" style="width: 100%;"/><img src="./img/asd.jpg" alt="" style="width: 100%;"/></template></CateGory>
</div>

三、作用域插槽，可以实现插槽定义者向组件使用者传递数据。

数据存放在定义插槽的组件，却被父组件使用
通过 :数据名='数据名’传递给父组件
父组件通过 <template>节点中的scope属性接受数据对象
可同时向父组件传递多组数据因为父组件接收的是对象

<div class="category"><h3>{{title}}分类</h3><slot :foods='foods'>center插槽，当使用者没有传递具体介都时出现</slot>
</div>

<CateGory title='美食'><template scope="dataObject"><ul><li v-for="(food,index) in dataObject.foods" :key="index">{{food}}</li></ul></template>
</CateGory>

作用域插槽声明时也可设置name属性用法与具名插槽相同

Vue 自定义组件 —— slot插槽相关推荐

vue自定义组件，插槽，自定义事件
vue组件套娃 1. vue自定义组件 2. 组件和插槽套娃 3. vue组件通过自定义事件更改vue实例中的数据 1. vue自定义组件语法 Vue.component('自定义组件名', {pr ...
vue自定义组件及定义插槽
vue自定义组件绑定事件: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／前端知识
文章目录使用意义基础使用给组件添加属性传递事件自定义组件的v-model 剖析v-model原理使用示例插槽使用意义有时候一组HTML代码可能会在多出使用(比如页眉页脚).如果我们把 ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
vue自定义组件是.vue还是html,Vue自定义组件的四种方式示例详解
四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) ...
Vue自定义组件封装及使用Excel
Vue自定义组件封装及使用Excel 一.js-xlsx 组件安装二. 创建vue组件三.使用四.效果图一.js-xlsx 组件安装 npm install xlsx --savenpm in ...
Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器. 基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现日期时间范围选择代码 ...
Vue自定义组件npm上传私服，且从私服下载使用
Vue自定义组件npm上传私服,yarn私服下载使用安装镜像源管理工具nrm 发布自定义组件到公司私服若未下载nrm源管理工具直接使用npm设置私服地址也可以以下步骤都是基于npm命令从私服下 ...
Vue自定义组件及组件传值
vue自定义组件: 1.在src中components中,新建文件,后缀名为.vue组件(首字母建议大写)例如:Weekly.vue 2.Weekly.vue: 3.在app.vue中引用组件: js ...

Vue 自定义组件 —— slot插槽

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

一、默认插槽

二、具名插槽声明插槽时指定name属性用于区别每个插槽便可以声明多个插槽

三、作用域插槽，可以实现插槽定义者向组件使用者传递数据。

作用域插槽声明时也可设置name属性用法与具名插槽相同

Vue 自定义组件 —— slot插槽相关推荐

最新文章

热门文章

Vue 自定义组件 —— slot插槽

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用 slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

一、默认插槽

二、具名插槽 声明插槽时指定name属性 用于区别每个插槽 便可以声明多个插槽

三、作用域插槽，可以实现 插槽定义者 向 组件使用者传递数据。

作用域插槽声明时也可设置name属性 用法与具名插槽相同

Vue 自定义组件 —— slot插槽相关推荐

最新文章

热门文章

二、具名插槽声明插槽时指定name属性用于区别每个插槽便可以声明多个插槽

三、作用域插槽，可以实现插槽定义者向组件使用者传递数据。

作用域插槽声明时也可设置name属性用法与具名插槽相同