vue脚手架 vue-cli配置目录解构+组件插槽slot用法

梦里梦外; 2022-11-30 01:27 120阅读 0赞

首先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>
        <div>子级自己的东西</div>
    </div>
    </template>

#### 具名插槽 ####

在设置插槽时，可以给插槽设置不同的name属性，来区分不同的插槽。

在使用插槽时，通过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 name="s1"></slot>
        <div>子级自己的东西</div>
         <slot name="s2"></slot>
    </div>
    </template>