实战举例——vue.js组件开发

有很多人在问有关Vue的组件开发，虽然之前我的文章里讲过关于前端组件开发的例子，不过作为一个前端技术小白，还是有很多内容需要学习和巩固。我这里用我之前开发过的组件举例，再次为大家简单分享一下基于Vue2和elementUI开发的组件思路和实战例子。包教包会包有用。

简单框架

首先可以看到在fence文件夹下，有一个与inde主页并列的组件文件夹components。其下的文件就是我们创建的组件了。在创建组件后，其内部需要暴露一些函数以供父组件调用。比如我这个组件是一个用来帮助主页列表实现添加和修改选项的弹窗，那么我的组件中首先需要有一个isPreview

参数，暴露函数

组件内最基本需要具有的函数和参数如下：
isPreview：控制弹窗的显隐

export default {
  data () {
    return {
      isPreview: false, //控制显隐
    }
  },
  methods:{
    initForm(isPreview) {
      this.isPreview = Boolean(isPreview);
    },
  }
}

父组件调用

父组件的调用也是一门学问。这里简单的引用需要注意的事项有：
1、父组件通过调用自组件里我们事先写好的函数initForm来实现对组件内isPreview的控制，
2、如果需要调用组件内部的方法，在调用组件时需要添加引用

<template>
    <AddEditPanel 
      ref="AddEditPanel"
      v-show="showAddPanel"
    ></AddEditPanel>
</template>
<script>
import AddEditPanel from "./components/AddEditPanel.vue";
export default {
	components: {
    	AddEditPanel
  	},
  	data () {
      return {
      	showAddPanel: false,
  	  }
  	}
  	methods:{
  	  addHandel() { //打开弹窗的函数
        this.showAddPanel = true;
        this.$refs.AddEditPanel.initForm();
      },
  	}
}
</script>

传参

initForm函数依然可以通过在括号内添加参数传参到子组件中。不过需要注意的是，在initForm中传入的参数需要在子组件接收。接收之后方可操作。