vue脚手架 vue-cli配置目录解构+组件插槽slot用法
2020-08-22 15:12
585 查看
首先npm下载好vue
进入要创建项目的路径下
vue init webpack 项目名称
项目名称不要包含中文和空格
初始化过程:
Project name (mydemo) 项目名称 Project description (A Vue.js project) 项目描述 Author (ming <fanmingjian@offcn.com>) 项目作者 Vue build (Use arrow keys) 项目运行方式 > Runtime + Compiler: recommended for most users Install vue-router? (Y/n) 是否安装vue路由 n Use ESLint to lint your code? (Y/n) n Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) > Yes, use NPM
进入项目根目录,执行命令
npm run dev
模块化slot用法
slot插槽语法:有两种用法 和我们动画一样分为匿名插槽和具名插槽
匿名插槽
第一步:在子组件中添加slot标签
<slot></slot> 子组件内容...
第二步:在父组件使用子组件时,在子组件的内部分发内容
<子组件名> 要分发的内容1 </子组件名>
//父级组件 调用子级组件 直接在组件内写东西 <template> <div> <right> <h1>插槽</h1> </right> </div> </template> //子级组件 <template> <div> <!-- slot占位父组件插入的标签代替这个slot --> <slot></slot> <div>子级自己的东西</div> </div> </template>
具名插槽
在设置插槽时,可以给插槽设置不同的name属性,来区分不同的插槽。
<slot name="插槽1"></slot> 组件内容。。。。 <slot name="插槽2"></slot>
在使用插槽时,通过slot属性来区分不同的插槽
<子组件名> <标签名 slot="插槽1"></标签名> <标签名 slot="插槽2"></标签名> </子组件名>
```javascript //父级组件 调用子级组件 直接在组件内写东西 <template> <div> <right> <h1 slot="s1">插槽1</h1> <h1 slot="s2">插槽2</h1> </right> </div> </template> //子级组件 <template> <div> <!-- slot占位父组件插入的标签代替这个slot 一一对应 --> <slot name="s1"></slot> <div>子级自己的东西</div> <slot name="s2"></slot> </div> </template>
相关文章推荐
- vue-cli脚手架config目录下index.js配置文件的方法
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录下utils.js工具配置文件详解(转)
- vue-cli脚手架config目录下index.js配置文件详解
- 底层:vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录中的build.js配置文件
- vue-cli脚手架build目录中的karma.conf.js配置文件
- 详解vue-cli脚手架build目录中的dev-server.js配置文件
- 宅小叔前端:vue脚手架 vue-cli配置文件目录结构简说
- 三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
- vue-cli脚手架build目录下utils.js工具配置文件详解
- vue-cli脚手架build目录中的webpack.base.conf.js配置文件
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件
- vue-cli脚手架build目录中的webpack.dev.conf.js配置文件
- 介绍vue-cli脚手架config目录下index.js配置文件
- vue-cli脚手架config目录下index.js配置文件
- vue-cli脚手架build目录下utils.js工具配置文件详解
- vue-cli3脚手架的配置以及使用
- 深入解析vue使用插槽分发内容slot的用法
- 关于Vue中新老版本slot插槽,属性验证validator,过滤器fliter的用法