vue学习记录(八)---知识点拾遗（下）

1、vue的函数式组件编程以及jsx语法

为写项目的过程中，如果遇到比较动态的template的时候，可以使用函数式组件，具体如下

新建jsx文件

export default {
  name: 'homeTest',
  functional: true, //是否开启函数式编程，开启后不能定义data, methods, computed, watch等对象
  props: { // 可以对传入的属性进行选择接收与不接收，如果不接收，那么在render里面就无法使用,如果不定义的情况下，那么所有传入的属性都可以使用
    title: String,
    isShow: Boolean
  },
  render (h, context) { //第一个参数必需传h，第二个参数表示调用组件里的上下文
    return <div class='container'>
      {context.props.title} <!--在进行变量使用的时候需要用{}进行修饰-->
      {context.props.isShow //使用三元运算符进行判断是否渲染，如果多条件的情况，可以在jsx的文件里定义函数进行处理
        ? context.props.title //在使用事件的时候，如果 on-click这个是固定格式，里面需要用{}进行修饰，注意下面定法
        : <el-button type='primary' on-click={() => context.listeners.change()}>按钮</el-button>}
      <div>{context.slots().default}</div> <!--使用插槽的时候，调用方法-->
    </div>
  }
}

注意：以上方式进行编码的时候，引入样式文件很容易影响到全局，那么可以使用另外一种方式，并且以上的方法需要在父组件中定义，调用时用context.listeners进行调用

 新建test.vue内容如下，但是在render里面用的时jsx的语法

<script>
export default {
  name: 'homeTest',
  functional: true,
  props: {
    title: String,
    isShow: Boolean
  },
  render (h, context) {
    return <div class='container'>
      {context.props.title}
      {context.props.isShow
        ? context.props.title
        : <el-button type='primary' on-click={() => context.listeners.change()}>按钮</el-button>}
      <div>{context.slots().default}</div>
    </div>
  }
}
</script>
<style lang="less" scoped>
.container{
  color: blue
}
</style>

 注意：一旦声明了functional为true的时候就无状态、无实例、没有this上下文、无生命周期

 在jsx中实现列表循环渲染

export default {
  name: 'homeTest',
  functional: true,
  props: {
    title: String,
    isShow: Boolean
  },
  render (h, context) {
    const list = ['aaa', 'bbb', 'ccc']
    const arr = []
    list.forEach(val => arr.push(<div>{val}</div>))
    return <div class='container'>
      {arr}
    </div>
  }
}

注意： style={{width:'233px', marginRight:'10px'}}样式的写法要用双花括号，里面可以使用变量 

使用template的方式进行函数式组件的定义

主组件

<template>
  <div>
    <h3>this is home</h3>
    <itemWrap :title="title" @clickEvent="clickEvent"><div>haha</div></itemWrap> <!--函数式组件的调用-->
  </div>
</template>
<script>
import itemWrap from './itemWrap'
export default {
  name: 'Home',
  components: {
    itemWrap
  },
  data () {
    return {
      title: '这个是传值的title'
    }
  },
  methods: {
    clickEvent () {
      console.log('ok')
    }
  }
}
</script>
<style lang="less" scoped></style>

 函数式组件

<template functional>
  <div>
    <h1>{{props.title}}</h1> <!--属性的调用-->
    <slot></slot> <!--插槽的调用-->
    <button @click="listeners.clickEvent">点击</button> <!--方法的调用-->
  </div>
</template>
<script>
export default {
  name: 'Item'
}
</script>
<style lang="less" scoped></style>

 2、组件的拆分规则

在使用vue组件进行拆分功能的时候，如果有遇到需要渲染的数据比较深层的时候避免一个组件完成，尽量使用插槽来完成例如：

在调用界面

  <itemWrap>
    <item v-for="(val, ind) of list" :key="ind" :content="val"></item>
  </itemWrap>

itemWrap组件

<div class="itemWrap">
  <slot></slot>
</div>

item组件

<template>
    <div>{{content}}</div>
</template>
<script>
export default {
  name: 'item',
  props: {
    content: {
      type: String,
      required: true
    }
  }
}
</script>

这种格式的好处在于，如果遇到数据多层级的时候，而致使中层传数据的麻烦，可以在调用层进行数据配置

 3、vue路由传参params与query的区别

vue通过路由传参的方式有两种，params与query，两者的区别在于，params是实现编程式导航跳转，而query是实现路径拼接跳转

1、在路由配置的时候，params的配置需要配置成 /路径/:id 的形式，id表示会在params中进行定义，而query无需这样配置

params路由的配置如下

{
  path: '/test/:id',
  name: 'test',
  component: () => import('@/views/test/first'),
  meta: { title: 'test' }
}

注意：如果是可选参数，那么可以书写成该样式 :id?

query路由的配置按正常配置

2、在进行路由跳转的时候，params需要用路由中定义的name进行跳转，不能用path进行跳转否则会失败

params路由跳转

this.$router.push({ name: 'test', params: { id: { name: 'aaa', age: '12', sex: 'unknow' } } })

<router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId:  status2 }}" >

query路由跳转按正常跳转

4、vue中动态参数，以及动态事件的写法

let app = Vue.createApp({
    template: '<div @[event]="test" :[name]="content">{{content}}</div>',
    data() {
        return {
            content: 'abc',
            event: 'mouseover', //这里的mouseover相当于一个动态事件
            name: 'message'  //这里的name相当于一个动态参数
        }
    },
    setup(proxy) {
        const test = () => {
            console.log(app, vm)
        }

        return {
            test
        }
    }
})
let vm = app.mount('#root')

5、vue中样式的模块化写法

<template>
<div :class="[$style.container]">
  <h2 :class="[$style.container__p]">this is home111</h2>
  <el-button type="primary" @click="changeEvent(0)">item组件</el-button>
  <el-button type="primary" @click="changeEvent(1)">itemWrap组件</el-button>
  <component :is='getType(currentIndex)' ref="abc"></component>
  <el-button @click="getComp">获取</el-button>
</div>
</template>
<script>
import Item from './item'
import ItemWrap from './itemWrap'
export default {
  name: 'Home',
  components: {
    Item, ItemWrap
  },
  data () {
    return {
      currentIndex: 0
    }
  },
  methods: {
    getType (id) {
      return id === 0 ? 'Item' : 'ItemWrap'
    },
    changeEvent (id) {
      this.currentIndex = id
    },
    getComp () {
      console.log(this.$refs.abc)
      this.$refs.abc.check && this.$refs.abc.check()
    }
  }
}
</script>
<style lang="less" module>
  .container{
    color: red;
    &__p{
      color: blue;
    }
  }
</style>

相当react里的css in js的写法