vue组件之 局部注册组件

组件是可复用的Vue实例，且带有一个名字。

组件分为全局注册和局部注册两部分。
由于全局注册没有局部注册常用，所以对局部注册做个总结。

局部注册

全局注册所有的组件，意味着即使不再使用这个组件，它仍然会包含在最后的 构建结果中，造成用户下载JavaScript的无谓增加。所以在日常编码中，局部注册较为常用。

一、组件的定义

定义一个组件就是在一个vue文件里定义上你想要复用的东西，可以传参，可以定义规则、
例子 定义一个简单的Form组件

<template>
  <el-form ref="formName" :model="formData" :rules="rules" label-width="85px">

    <el-form-item :label="nameLabel" prop="name">
      <el-input v-model.trim="formData.name" :placeholder="placeholderText"></el-input>
    </el-form-item>

    <el-form-item label="备注" prop="note">
      <el-input type="textarea" placeholder="请输入备注" v-model.trim="formData.note" :rows="4"></el-input>
    </el-form-item>

    <el-form-item class="form-btn-line">
      <el-button @click="onCancel">取消</el-button>
      <el-button :loading="isLoading" type="primary" @click="onSubmit">{{ !isEdit ? '新建' : '保存' }}</el-button>
    </el-form-item>

  </el-form>
</template>
<script>
import formMixin from '@/modules/mixins/formMixin'
export default {
  mixins: [ formMixin ],
  data () {
    return {
      formData: {name: '', note: ''}
    }
  },
  props: {
    nameLabel: {
      type: String,
      default: '名称'
    },
    isEdit: Boolean,  // 是否是编辑模式
  },
  computed: {
    placeholderText () {
      return '请输入' + this.nameLabel
    },
    rules () {
      const { name, note } = this.myRules
      return { name, note }
    }
  }
}
</script>

二、组件局部注册

在模块系统中局部注册
在使用Babel和Webpack的模块系统时，官方推荐创建一个components目录，并将，每个组件放置在各自的文件中。

局部注册组件只需要在你的需要该组件的vue中，比如roleList.vue中 先引入再使用即可

1、引入

<script>
	import SimpleForm from '@/components/common/SimpleForm'
	components: {   //注意是components而不是component
    SimpleForm        
  },
</script>

2、使用

 <el-dialog title="新建用户"
    :close-on-click-modal="false"
    :visible.sync="createVisible"
    width="500px">
      <simple-form nameLabel="用户名称" v-if="createVisible" :isLoading="submitLoading" @cancel="hideAdd" @submit="add" />
    </el-dialog>

三、需要注意点

1、通过prop传递数据
能够重复利用，才是组件的关键，因此降低一个组件的耦合度显得很重要。这就需要标题或者标签名这种定义为我们想要的数据，然后就有了传参。
Prop是你可以在组件上注册一些自定义的attribute。当一个值传递给一个prop attribute的时候，它就变成了那个组件实例的一个propotype.
一个组件默认可以拥有任意数量的prop，任何值都可以传递任何prop。
在定义参数的时候，通常每个prop都有指定值的类型，这时，用对象的形式列出来prop，这些property的名称和值分别是prop各自的名称和类型：
定义参数的类型和默认值：

props: {
    nameLabel: {
      type: String,
      default: '名称'
    },
    isEdit: Boolean,  // 是否是编辑模式
  },

使用时，传递静态或者动态的prop

//传递一个静态的prop
<simple-form nameLabel="型号名称" :isEdit="true" />

<!-- 动态赋予一个变量的值 -->
<simple-form v-bind:nameLabel="newRole.name"  />

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
  v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>

2、单个根元素，必须具有根节点

在创建组件的时候，模板里的东西应该是有很多的，但是你必须包裹在同一元素里
例如：

<h3>{{ title }}</h3>
<div v-html="content"></div>

这样Vue会显示一个错误，并解释道： every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：

<div class="blog-post">
  <h3>{{ title }}</h3>
  <div v-html="content"></div>
</div>

3、局部注册是components 而不是component
4、监听子组件事件