点点18: 插槽+font-awesome+vant自动按需引入+vue路由

点点18: 插槽+font-awesome+vant自动按需引入+vue路由

这里是knockkey, 今天是12-11.

1. 插槽

• 内容插槽

// 子组件 knockey.vue
<template>
  <slot></slot>
</template>

// 父组件

 <knockkey>
   <!-- 传入子组件的自定义内容，会填入到子组件的slot插槽中 -->
   <p>我不止可以放p, 放组件都可以</p>
 </knockkey>

• 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
• 具名插槽

    <!-- 插槽组件knockkey.vue -->
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>

    <!-- 使用组件 -->
    <knockkey>
      <template v-slot:header>
        <div>我是头部</div>
      </template>
      
     <template>
      <div>我是除了头部和尾部的</div>
      <div>我是除了头部和尾部的</div>
     </template>
      
      <template #footer>
        <div>我是尾部, 我使用了具名插槽的缩写</div>
      </template>
    </knockkey>

• 作用域插槽(父组件可以拿到子组件的数据。子组件可以在slot标签上绑定属性值)

    <!-- knockkey.vue -->
      <div>
        <!-- 将值传出去 -->
        <slot v-bind:usertext="user"></slot>
      </div>

export default {
  data() {
    return {
      user: {
        name: 'knock',
        age: 18
      }
    }
  }
 }

父组件接收

    <knockkey #default="slotProps">
      {{ slotProps.usertext.age}}
    </knockkey>

• v-slot属性只能在<template>上使用，但在只有默认插槽时可以在组件标签上使用
• 默认插槽名为default，可以省略default直接写v-slot
• 缩写为#时不能不写参数，写成#default
• 解构获取值 原来

    <knockkey #default="slotProps">
      {{ slotProps.usertext.age }}
    </knockkey>

现在

    <knockkey #default="{usertext}">
      {{ usertext.age }}
    </knockkey>

重命名

    <knockkey #default="{usertext:usertextNewName}">
      {{ usertextNewName.age }}
    </knockkey>

2. 在vue组件中里面用font awesome

• 官网:https://fontawesome.dashgame.com/#top

  • 在vue项目点的public文件夹下的index.html中引入font-awesome的地址，便可直接在组件中使用
  • <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

• 第二种方法

  • npm install font-awesome
  • main.js import 'font-awesome/css/font-awesome.css'

<template>
  <div>
    <div>微信：<span class="fa fa-wechat"></span></div>
    <div>teitetr: <span class="fa fa-twitter"></span></div>
    <i class="fa fa-camera-retro"></i> fa-camera-retro
  </div>
</template>

3. posittion:fixed

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

4. vant自动按需引入

• 官网:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

<template>
    <div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
</template>

<script>
import { Button } from 'vant'
export default {
  data() {
    return {

    }
  },
  components: {
    [Button.name]: Button
  },

5. Vue路由

• $router是路由操作对象, 只写对象
• $route是路由信息对象, 只读对象
• 拿到params (/profile/:id)
  • let id = this.$route.params.id
• 路由跳转方式

//假设有这么一个路由
{ 
path: '/hello', 
name: 'HelloWorld', 
component: helloPage 
}

• 方式一:name

this.$router.push({ name: 'HelloWorld', query: { id: 12345 } })

• 方式二: path

this.$router.push({ path: '/hello', query: { id: 12345 } })

path路由跳转方式,params传参会被忽略，只能用name命名的方式跳转

this.$router.push({
        name:"admin",　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
        params:{id:item.id}
})       

//这个组件对应的路由配置
{　　//组件路径
    path: '/admin',　　//组件别名
    name: 'admin',　　//组件名
    component: Admin,
}

• 重定向

const routes = [
  {
    path: '/',
    redirect: '/home'

  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  }
]

6. vue安装less遇到版本问题需要指定版本