封装vue2局部组件都要注意什么

一. 关于局部组件组成的三个部分(template, script, style)

template => 组件的模板结构 (必选)

  • 每个组件对应的模板结构,需要定义到template节点中
html 复制代码
<template>
    <!-- 当前组件的dom结构,需要定义到template结构的内部 -->
</template>
  • template中使用的指令
html 复制代码
<template>
    <!-- 【1.内容渲染指令】 -->
    <span v-text="msg"></span>
    <span>{{msg}}</span>
    <div v-html="html"></div>

    <!-- 【2.属性绑定指令】 -->
    <img v-bind:src="imageSrc">

    <!-- 【3.双向指令绑定指令】 -->
    <select v-model=""></select>

    <!-- 【4.循环渲染指令】 -->
    <div v-for="(item, index) in items"></div>

    <!-- 【5.条件渲染】 -->
    <div v-if="Math.random() > 0.5">Now you see me</div>
    <div v-else-if="type === 'B'"></div>
    <div v-else>Now you don't</div>
</template>
  • template定义根节点

注:vue 2.x版本中,<template>节点内dom结构仅支持单个根节点;但在vue 3.x版本中,支持多个根节点

script => 组件的javascript行为 (可选)

  • script中的data节点(可以定义当前组件渲染期间需要用到的数据对象;data是一个函数)
  • script中的methods节点(可以定义组件中的事件处理函数)

style => 组件的样式 (可选)

  • style的lang属性支持可选值css,less,sass,scss
  • 当使用less或sass时,要先安装less或sass依赖,再设置lang的属性值为less或sass
  • scss是sass3.0引入的语法,可以理解scss是sass的一个升级版本,弥补sass和css之间的鸿沟
  • 合理使用scoped,因为使用scoped可以让样式只对当前组件生效

二. 关于生命周期

  • beforeCreate
  • created
  • beforeMounted
  • mounted
  • beforeUpdate
  • updated
  • beforeDestory
  • destoryed

created和mounted的区别:created在模板渲染成html前调用,mounted在模板渲染成html后调用

三. 关于父子组件的传值

**封装出来的通用组件叫子组件,引用通用组件的界面叫做父组件,**组件的封装必须高性能低耦合

1. 父组件向子组件传参用props

html 复制代码
<!-- 父组件 -->
<template>
    <Child :articleList="articleList"></Child>
</template>

<!-- 子组件 -->
<template>
    <div>
        <ul>
            <li v-for="(value,index) in articleList" :key="index">{{value}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Child",
        props: {
            articleList: {
                type: array,
                default: function () {
                    return []
                }    
            }
        },//接收父组件传来的数据articleList
    }
</script>

2. 子组件向父组件传参用emit

html 复制代码
<!-- 父组件 -->
<template>
    <common-dialog @pushId="getId"></common-dialog>
</template>
<script>
    methods: {
        getId (id) {}
    }
</script>

<!-- 子组件 -->
<template>
    <div>
         <input type="button" @click="emitIndex(id)" value="向父组件发送数据">
    </div>
</template>
<script>
    export default {
        methods: {
            emitIndex (id) {
                this.$emit('pushId', id)
            }
        }
    }
</script>

四. 关于computed与watch

1. computed与watch的区别:

  • computed是计算属性,watch是监听,监听data中的数据变化
  • computed支持缓存,即当其依赖的属性值发生变化时,计算属性会重新计算,反之则使用缓存中的属性值;watch不支持缓存,当对应属性发生变化的时候,响应执行
  • computed不支持异步,有异步操作时无法监听数据变化;watch支持异步

2. computed与watch的使用场景

  • computed的使用
javascript 复制代码
<template>
    <div>
        {{ changewords }}
    </div>
</template>
<script>
    export default {
       data () {
          myname: 'aBcDEf'
       },
       computed: {
          changewords(){
            return this.myname.substring(0,1).toUpperCase()
          }
       }   
    }
</script>
  • watch的使用
javascript 复制代码
<template>
     <div>
       <p>FullName: {{fullName}}</p>
       <p>FirstName: <input type="text" v-model="firstName"></p>
     </div>
</template>
<script>
    export default{
        data () {
          firstName: 'Dawei',
          lastName: 'Lou',
          fullName: ''
        },
        watch: {
          firstName(newName, oldName) {
            this.fullName = newName + ' ' + this.lastName;
          }
          // firstName: {
          //     handler(newName, oldName) {
          //        this.fullName = newName + ' ' + this.lastName;
          //     },
          //     immediate: true
          // }
        }
    }
</script>

五. 关于mixin

局部混入中mixin的文件就是一个对象,这个对象可以包含vue组件的一些常见的配置,包括data,methods,生命周期的钩子函数等等。

不同组件中的mixin是相互独立的。

mixin的使用

javascript 复制代码
<!-- 引用mixins的文件 -->
<script>
    import queryList from "@/common/mixin/queryList";
    export default{
        mixins: [queryList]
    }
</script>

<!-- mixins的文件 -->
export const mixins = {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
};

六. 关于slot的使用

html 复制代码
<!-- 子组件使用插槽slot   Link.vue-->
<template>
  <a :href="href" rel="external nofollow"  class="link">
    <!-- 留个插槽,外界传入内容放置在这里 -->
    <slot></slot>
  </a>
</template>

<!-- 父组件调用子组件 -->
<template>
  <div class="app">
    <Link href="https://baidu.com" rel="external nofollow" > 百度</Link>
    <Link href="https://google.com" rel="external nofollow"  style="margin-top: 10px">
      <!-- 这里允许放置任意的内容,包括字符串和标签 -->
      <span>Icon</span>谷歌</Link
    </Link>
  </div>
</template>

七. 关于vuex

vuex的五个组成部分:state,mulations,action,getters,modules

  • state:定义了应用程序的状态,即要管理的数据
javascript 复制代码
const store = new Vuex.Store({
  state: {
    count: 0
  }
})
  • getters:用于获取state中的状态,类似vue组件中的计算属性
javascript 复制代码
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})
  • mulations:修改state的数据
javascript 复制代码
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    add(state, payload) {
      state.count += payload
    }
  }
})
  • action:用于异步操作和提交mulations,在actions中可以进行任何异步操作,最后再提交到mulations中同步修改state
javascript 复制代码
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})
  • modules:用于将store分割成模块,每个模块都拥有自己的state, getters, mulations, action和子模块,以便提高应用程序的可维护性
javascript 复制代码
const store = new Vuex.Store({
  modules: {
    cart: {
      state: {
        items: []
      },
      mutations: {
        addItem(state, item) {
          state.items.push(item)
        }
      },
      actions: {
        addAsyncItem(context, item) {
          setTimeout(() => {
            context.commit('addItem', item)
          }, 1000)
        }
      }
    }
  }
})
相关推荐
开心工作室_kaic22 分钟前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā23 分钟前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年2 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder2 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727572 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart2 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客3 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
猫爪笔记3 小时前
前端:HTML (学习笔记)【1】
前端·笔记·学习·html
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js