组件化是统计开发标准的有效方式,同时也是快速开发的有效方式,提高了前端布局的重复利用率,大大缩减的代码量,提高了前端开发的工作效率!那么如何vue是如何创建组件和引用组件及如何进行传参的呢?下面就一点点的带你走进VUE组件化的教程。
vue组件化:自定义组件创建并引入和传参-Qui-Note

本教程推荐单文件组件方式:一个组件一个vue文件。

1.首先在文件夹components中创建组件header.vue

<template>
  <div class="header"> 
     <div class="titleText">{{ msg }}</div> 
  </div>
</template>

<script>
export default {
  name: 'headerPage',
  props: { //向外暴露参数
    title: String
  },
  data () {
    return {
      msg:  '你好,陈小知!'
    }
  },
  mounted () {
    this.msgChange()
  },
  methods: {
    msgChange () { //动态修改参数
      this.msg = this.title
    }
  }
}
</script>

2.新页面引用组件,一定要“路径+文件.后缀”,我在这步吭呲好久!

import uiHeader from '../components/header.vue'

3.指定引用组件,相当于声明一下,我这个页面用了什么组件!

components: {
    uiHeader
}

当然这个地方允许自定义组件名称的:

components: {
  'ui-header'  :  uiHeader
}


4.调用组件

<uiHeader title="0"></uiHeader>

这样的的话对应的调用就要改成 

<ui-header title="动态参数测试"></ui-header>

5.Vue动态传参需要用到props向外暴露参数,并规定参数类型,调用的时候直接绑定参数就行

<uiHeader title="我是陈小知"></uiHeader>
<uiHeader :title="headerTxt"></uiHeader>

这样就简单开发了一个小组件了,并实现了动态传参的效果!你学废了吗?拒绝无效代码,从写博客做起!—— 我是陈小知