今日，怂怂就为带来一篇前端vue干货，如何在vue中创建自定义组件，并且在项目中引入自定义的组件；具有很好的参考价值，一起跟怂怂过来吧，如若对您有所帮助，别忘了在文章右上角点个赞哦。


1，在你的项目中专门创建一个放置自定义组件的文件夹（我是放在了components底下的common中，本文以table.vue为例）



2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式（本文为例：<v-table></v-table>，因为我在定义table模块的时候是定义name：v-table，所以引用的时候，也必须得用所在table模块中name定义的名字）；



3、在index.vue中引入table.vue模块 

//index.vue 页面 ，引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块；注意是驼峰命名法
</div>

4、在index.vue页面引入该组件(注意：table.vue，我是在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）

//index.vue
<script>
  import vTable from '../../components/common/table'  //table.vue（注意，我在index.vue页面中添加了模块<v-table>,不是html标签，其实就是vue引入新的子组件）
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>

ps：说白了，自定义组件就好比封装，把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可。

另外，为了防止在同一页面写入过多的代码，不方便后期维护，便可以把整个页面分成多个小模块，然后在主页面进行模块引入，创建包括引入步骤都是一样的。

比如：



总结：

vue组件命名问题：

1、别用驼峰式命名 因为 vue   webpack编译后 ，他统一会变成小写（顾名思义：骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这就叫驼峰命名；）

2、最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>


❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ 

❤如果喜欢大白兔分享的文章，就给大白兔点个关注吧！(๑′ᴗ‵๑)づ╭❤～

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号：708072830】

❤鉴于个人经验有限，所有观点及技术研点，如有异议，请直接回复讨论(请勿发表攻击言论)

在react开发过程中，有时会碰到一些需求需要我们去操控dom，那么我们就可以给组件挂载一个ref属性，然后就可以通过ref调用这个组件的方法或者属性之类的。
接下来我们就来看看函数组件和类组件都是如何去挂载创建ref和使用它的：

函数式组件(Hook)：
// 首先引入React及useRef
import React, { useRef } from 'react;
function Content() {
	// 创建ref
	const fileInputEl = useRef(null);
	return (
		<>
			{/* 在你的元素或者组件上面挂载ref */}
			<input ref={fileInputEl} type={'file'} hidden />
			{/* 使用ref */}
			{/* 当点击这个div的时候触发input的点击事件 */}
			<div onClick={() => fileInputEl.current.click()}>上传文件</div>
		</>
	)
}


类组件创建使用ref
// 引入React
import React, { Component } from 'react';
export default class Content extends Component {
	constructor(props) {
		super(props);
		// 通过React.createRef()创建ref,挂载到组件上
		this.editTableEl = React.createRef();
	}
	componentWillReceiveProps() {
		// 当走入componentWillReceiveProps生命周期时会触发此ref挂载到的组件的refreshDataSource()方法（PS：这个方法是自己在挂载ref的那个组件中定义的）
		this.editTableEl.current && this.editTableEl.current.refreshDataSource();
	}
	render() {
		return (
			<div>
				<EditableTable
					// 挂载ref
					ref={this.editTableEl}
				/>
			</div>
		)
	}
}

1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法

 

props: {
  echartStyle: {
    type: Object,
    default() {
      return {}
    }},
    titleText: {
      type: String,
      default: ''
    },
    tooltipFormatter: {
      type: String,
      default: ''
    },
    opinion: {
      type: Array,
      default() {
        return []
      }
    },
    seriesName: {
      type: String,
      default: ''
    },
    opinionData: {
      type: Array,
      default() {
        return []
      }
    }

}

//watch进行监听

 

watch:{
  titleText:function(newValue,oldValue){
    this.getChange();
  },
  echartStyle:{
    handler(newValue,oldValue){
       this.getChange();
    },
    deep:true
  },
  tooltipFormatter:function(newValue,oldValue){
    this.getChange();
  },
  opinion:{
    handler(newValue,oldValue){
      this.getChange();
    },
    deep:true //深度监听
  },
  seriesName:function(newValue,oldValue){
    this.getChange();
  },
  opinionData:{
    handler(newValue,oldValue){
      this.getChange();
    },
    deep:true
  }

},

2 在父组件中用ref="str" 来声明组件，然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法

来 重新渲染（暂时使用有bug，不能够及时渲染,父组件值已经改变了，但是子组件值仍然没有改变，不能够及时渲染）

   这个方法感觉props'接收数据在调用方法之后，明明父组件的值已经改变了，但是父组件在调用子组件方法时，数据仍然没有  接收到，调用之后才接收到，这个方法暂且没用，应该是声明ref的时候声明的是当前组件的实例，然后调用时调用的也是值未改变时的属性。这个没什么用，可以用来调用子组件方法。

<pie-chart2   ref="pieChart"
  :echartStyle="echartStyle"  :titleText="titleText" :tooltipFormatter="tooltipFormatter"
  :opinion="opinion"  :seriesName="seriesName" :opinionData="opinionData"

>
</pie-chart2>


 

refresh:function(){
  if(!this.bindData.data){
    this.bindData.data = this.bindData.configures;
  }
  this.bindData.id = this.bindData.moduleId ||'pir';
  if(this.bindData.data){
    alert(this.bindData.data.name);
    this.changeContent(this.bindData.data);
    this.getChartData(this.bindData.data);
    this.$refs.pieChart.getChange();
  }

},

3 在子组件上使用 v-if ="flag" （谢谢各位老哥的建议）

初始flag:true

修改data时

changData(data){

this.flag = false

this.data =data

this.$nexttck(()=>{

this.flag = true;

})

}

  

 

 

 

  

 

子组件使用this.$emit()向父组件传值

首先必须在父组件中引用子组件，然后实现传值


	
第一步 在父组件中引入子组件
	
使用import引入组件

import indexImportOrder from './components/indexImportOrder'

声明

//定义组件
      components:{
        indexImportOrder,
      },

使用

<indexImportOrder ref="indexImportOrder"/>


	
第二步 子组件向父组件传值
	
1.  在子组件中需要向父组件传值处使用this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递参数

 

//新订单页面跳转
        viewBusiness(){
          let flag = false;
          this.$emit('closeMain',flag);
        },

2.  在父组件中子组件引用处添加函数v-on:function="function1"； //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称

v-on： 可用 @ 代替 @function="function1" ，@ 为 v-on：的简写

<indexImportOrder ref="indexImportOrder" v-on:closeMain="closeMain"/>

val及为子组件中flag，即接收的子组件参数

closeMain(val){
        this.flag = val;
      },

 

 

 

更详细解释可参照：https://www.cnblogs.com/padding1015/p/7878741.html