VUE笔记

2023-11-22 20:51:58

VUE组件使用

props 和 $emit

props：子组件接收父组件传递的参数
$emit：子组件向父组件触发一个事件

组件间通讯 - 自定义事件

创建一个js文件，此文件只用于生成一个vue实例并export出去，在组件中引入后使用vue中自带的$emit和$on实现自定义事件的触发和监听，在组件销毁时需及时解绑自定义事件，否则可能会造成内存泄漏。（Vue3已移除此方法，可改用eventemitter3第三方插件实现）

组件生命周期

挂载阶段、更新阶段、销毁阶段
父子组件间生命周期执行顺序一般为从外到内再从内到外
例：父created > 子created > 子mounted > 父mounted

VUE高级特性

自定义v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。
注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。

$nextTick

页面更新完成后的执行的回调

slot

基本使用…
作用域插槽：父组件访问子组件中的数据，当使用多个相同子组件的时候，插槽内容可根据子组件中的数据进行动态展示
具名插槽：子组件中有多个插槽时可设置name属性准确找到对应插槽进行渲染

动态、异步组件

动态组件：<component :is=“component-name”></component>
异步组件：按需加载组件，可大大优化页面加载性能

export default {
    name: "Demo",
    components: {
        HelloWorld: () => import('./HelloWorld')
    }
}

keep-alive

缓存组件，提升页面性能

mixin

组件中相同的逻辑可抽离出来，使用mixin混合到组件中。
缺点：变量来源不明确，不利于阅读；多mixin可能会造成变量冲突；mixin和组件可能出现多对多的关系，复杂度较高。

VUEX

基本概念

state、getters、action、mutation

基本使用

dispatch、commit、mapState、mapGetters、mapActions、mapMutation

VUE-ROUTER

路由模式

hash（默认）, 例：http://aaa.com/#/b/123
H5 history（需server端支持），例：http://aaa.com/b/123

路由配置

动态路由

const User = {
    // 获取动态路由中的参数
    template: '<div>User {{$route.params.id}}</div>'
}
const router = new Router({
    routes: [
        // 动态路由参数，以冒号开头。能命中 '/user/1'、'/user/2' 等格式的路由
        {path: '/user/:id', component: User}
    ]
})

懒加载

const router = new Router({
    routes: [
    	{
    		path: '/',
    		// 当加载到该路由地址时才会加载次组件
    		component: () => import('./../components/Main')
    	},
        {
    		path: '/user',
    		component: () => import('./../components/User')
    	},
    ]
})

码农公寓