今日，怂怂就为带来一篇前端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;

})

}

  

 

 

 

  

 

Vue组件
     Vue组件介绍

     Vue组件使用步骤

     Vue组件的使用

     组件中data 和 el 选项

     使用 <script> 或 <template> 标签

     组件之间的通信

     通过props向子组件传递数据

     Vue的插槽





Vue组件
组件系统是Vue中一个重要的概念，他提供了一种抽象，可以独立使用和可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。组件是可复用的Vue实例，切带有一个名字。组件可以扩展HTML元素，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。






Vue组件使用步骤
    1.Vue组件的使用有以下3个步骤：
         1. 创建组件：调用Vue.extend()方法创建组件

         2. 注册组件：调用Vue.component()方法注册组件

         3. 使用组件：使用Vue实例页面内自定义标签组件


    2.样例Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		
	</head>
<body>
	<div id="app">
		<!--使用组件-->
		<mycomp></mycomp>
	</div>
		<script>
			//创建组件
			var myComp=Vue.extend({
				template:"<h2>使用Vue组件</h2>"
			});
			//注册组件
			Vue.component("mycomp",myComp);
			//实例化组件
			var vm=new Vue({
				el:"#app"
			})
		</script>
</body>
</html>

注意：组件的命名方式有两种：

kebab-case(短横线分隔命名)
PasecalCase(首字母大写命名)

因为直接在DOM中使用时只有 kebab-case(短横线分隔命名)是有效的，所有一般推荐 kebab-case(短横线分隔命名)方式命名。







Vue组件使用
组件注册
    1.全局注册
<div id="app">
		<!--使用组件-->
		<mycomp></mycomp>
	</div>
		<script>
			//创建组件
			var myComp=Vue.extend({
				template:"<h2>使用Vue组件</h2>"
			});
			//注册组件
			Vue.component("mycomp",myComp);
			//实例化组件
			var vm=new Vue({
				el:"#app"
			})
		</script>



    2.局部注册
<div id="app">
		<!--使用组件-->
		<mycomp></mycomp>
	</div>
		<script>
			//创建组件
			var myComp=Vue.extend({
				template:"<h3>使用局部Vue组件</h3>"
			})
			var vm=new Vue({
				el:"#app",
				components:{
					"mycomp":myComp//局部注册组件
				}
			})
		</script>



     3.组件语法糖
 - 简化全局注册
 <div id="app">
		<!--使用组件-->
		<my-comp></my-comp>
	</div>
	
		<script>
			//全局注册，my-comp是组件标签名
			Vue.component("my-comp",{
				template:"<div><h3>使用Vue组件</h3></div>"
			})
			var vm=new Vue({
				el:"#app"
			})
			
</script>



  - 简化局部注册
<div id="app">
		<!--使用组件-->
		<mycomp></mycomp>
	</div>
		<script>
			var vm=new Vue({
				el:"#app",
				//局部注册，mycomp是组件标签名
				components:{
						"mycomp":{
						template:"<div><h3>使用Vue组件</h3></div>"
					}
				}
			})
			
		</script>







组件中data 和 el 选项		
    一般实例化Vue的多数选项也可以用在Vue.extend)或Vue .component()中的，不过有两个特殊选项参数除外即data和el。Vue.js 规定:在定义组件的选项时，data 和el选项必须使用函数。如果data选项指向某个对象，这意味着所有的组件实例共用一个data。使用一个函数作为data选项，让这个函数返回一个新对象。


    1. 全局注册组件语法
<script>
//全局注册组件
			Vue.component("组件名称"，{
						el:function(){...}，
						data:function(){
							return{
								属性：值
							}
						},
						template:"组件模板"
					}
				}
			})
		</script>



    2. 局部注册组件语法
<script>
//局部注册组件
			var vm=new Vue({
				el:"#app",
				components:{
					"组件名称":{
						el:function(){...}
						data:function(){
							return{
								属性：值
							}
						},
						template:"组件模板"
					}
				}
			})
		</script>



    3. 样例Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		
	</head>
	<body>
		<div id="app">
			<h3>新奇水果</h3>
			<fruit-list-comp></fruit-list-comp>
		</div>
		<template id="fruitTemplate">
			<div>
				<ul>
					<li v-for="fruit in items">{{fruit}}</li>
				</ul>
			</div>
		</template>
		<script>
			var vm=new Vue({
				el:"#app",
				components:{
					"fruit-list-comp":{
						data:function(){
							return{
								items:["火龙果","苹果","西瓜","草莓"]
							}
						},
						template:"#fruitTemplate"
					}
				}
			})
		</script>
	</body>
</html>

		






使用 <script> 或 <template> 标签

    尽管语法糖简化了组件注册，但在template 选项中拼接HTML元素比较麻烦，这也导致了HTML 和JavaScript 拼接的高耦合性。所有Vue提供了两种方式将定义在 JavaScript 中的 HTML 模板分离出来。



 
    1.使用  script  标签
<div id="app">
		<!--使用组件-->
		<my-comp></my-comp>
	</div>
	
	<script type="text/javascript" id="myComp">
		<div>
			<h4>使用Vue组件</h4>
		</div>
	</script>
	
		<script>
			//全局注册，my-comp是组件标签名
			Vue.component("my-comp",{
				template:"#myComp"
			});
			var vm=new Vue({
				el:"#app",
				components:{
					"my-comp":{
						template:"#myComp"
					}
				}
				
			})
		</script>


    template选项现在不再是HTML元素，而是一个id。Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行编译



 
     2. 使用 template  标签
    如果使用 <template> ，则不需要指定type属性



<div id="app">
		<!--使用组件-->
		<my-comp></my-comp>
	</div>
	
	<template id="myComp">
		<div>
			<h4>使用Vue组件</h4>
		</div>
	</template>
	
		<script>
			//全局注册，my-comp是组件标签名
			
			var vm=new Vue({
				el:"#app",
				components:{
					"my-comp":{
						template:"#myComp"
					}
				}
				
			})		
		</script>







组件之间的通信
    1.组件中通信6个步骤：
1. var child=Vue.extend({…});/创建子组件

2. var parent=Vue.extend({	…});//创建父组件

3. template:"<p>这是父组件<child-compont></child-compont></p>"//在父组件内以标签的形式使用子标签

4. components:{	“child-compont”:child//注册子组件} //将子组件注册到父组件，并将子组件的标签设置为child-compont

5. Vue.component(“parent-compont”,parent)	//全局注册父组件

6. 在页面中使用<parent-compont></parent-compont>标签渲染父组件内容，同时子组件的内容也被渲染出来


    2.样例Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		
	</head>
	<body>
		<div id="app">
			<parent-compont></parent-compont>
		</div>
		<script>
			//创建子组件
			var child=Vue.extend({
				template:"<p>这是子组件</p>"
			});
			//创建父组件
			var parent=Vue.extend({
				//在父组件中使用parent-compont标签
				template:"<p>这是父组件<child-compont></child-compont></p>",
				components:{
					"child-compont":child//注册子组件
				}
			});
			//注册父组件
			Vue.component("parent-compont",parent)
			var vm=new Vue({
				el:"#app"
			})
		</script>
	</body>
</html>



    3.书写错误的两种方式

以子标签的形式在父组件中使用

<div id="app">
	<parent-compont>
		<child-compont></child-compont>
	</parent-compont>
</div>


在父组件标签外使用子标签

<div id="app">
	<parent-compont></parent-compont>
	<child-compont></child-compont>
</div>







通过props向子组件传递数据
   组件实例的作用域是孤立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，可以使用props把数据传给子组件。一个组件可以默认拥有任意数量的props（属性），任何值都可以传递给任何props。在组件中，使用选项props来声明需要从父组件中接收的数据。props的值可以是两种：一种是字符串数组，另一种是对象
    1. props的值是字符串数组
var component=Vue.extend({
				props:["属性名",...,"属性名"],
				template:"模板"
})



    2. props的值是字符串对象
var component=Vue.extend({
	props:{
				"属性名:String",
				"属性名:Number",
				"属性名:Boolean"
			},
	template:"模板"
})



    3.样例Demo
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.min.js"></script>
		<style type="text/css">
			.banner{
				background-color: rgb(46,110,194);
				color: rgb(255,255,255);
				width: 600px;
				height: 50px;
				line-height: 600px;
				text-align: center;
				padding: 20px;
				margin: 0 auto;
			}
			span{
				font-feature-settings: 0.6em;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--isShowStyle 动态绑定属性-->
            <!--message 静态绑定属性-->
			<banner-component v-bind:is-style="isShowStyle" message="Happy一下"></banner-component>
		</div>
		<!--子组件-->
		<template id="childComp">
			<span>{{subMessage}}</span>
		</template>
		
		<!--父组件-->
		<template id="parentComp">
			<div>
				<!--banner：isStyle 动态绑定属性-->
				<h2 :class="{ banner：isStyle}">
					{{message}}
					<!--sub-message（短横线分隔方式命名） 静态绑定属性-->
					<child-component sub-message="不玩就out了"></child-component>
				</h2>
			</div>
			
		</template>

		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					isShowStyle:true
				},
				components:{
					"banner-component":{
						props:["message","isStyle"],//props字符串
						template:"#parentComp",//注册父组件
						components:{
							"child-component":{
								props:{//props对象
									subMessage:String//驼峰式命名
								},
								template:"#childComp",//注册子组件
							}
						}
					}
				}
			})
		</script>
	</body>
</html>






Vue的插槽
     插槽是Vue提出来的一个概念，用于将携带的内容插入到指定位置，从而从而使模块化，具有的模块化的特质和更大重要性。插槽显不显示，怎样显示是由父组件来控制，而插槽在哪里显示就有子组件来进行控制。
    1. 插槽的使用
  插槽一般在Vue的父子组件中使用，在子组件中使用标签将不同的DOM树组合在一起。  标签是组件内部的占位符，用户可以使用自己的标记来填充。通过定义一个或多个标签，可将外部标记引入到组件的虚拟DOM中进行渲染，相当于“在此处渲染用户的标记”。插槽有两种使用方式:默认插槽和具名插槽。

默认插槽

     声明组件模板中包含一个插槽标签，然后使用组件时将组件内容部分填充到插槽中。

 
 <div id="app">
			<p-comp>需要分发的内容</p-comp>
		</div>
		<template id="pComp">
			<div>
				<h3>使用默认插槽</h3>
				<slot></slot>
			</div>
		</template>
		<script>
			var vm=new Vue({
				el:"#app",
				components:{
					"p-comp":{
						template:"#pComp"
					}
				}
			})
		</script>


具名插槽

     默认插槽只能有一个，当需要多个插槽时，就需要具名插槽了。

<div id="app">
			<p-comp>
				<template slot="header">
					<div>
				<!--
                	作者：offline
                	时间：2021-01-26
                	描述：具名插槽填充内容
                -->
					<h3>商品管理</h3>
				</template>
				商品管理内容
				<template slot="foots">
					<h6>版权声明</h6>
				</template>
			</p-comp>
		</div>
		<template id="pComp">
			<div>
				<!--
                	作者：offline
                	时间：2021-01-26
                	描述：具名插槽
                -->
				<slot name="header"></slot>
				<!--
                	作者：offline
                	时间：2021-01-26
                	描述：默认插槽
                -->
				<slot></slot>
				<!--
                	作者：offline
                	时间：2021-01-26
                	描述：具名插槽
                -->
				<slot name="foots"></slot>
			</div>
		</template>
		<script>
			var vm=new Vue({
				el:"#app",
				components:{
					"p-comp":{
						template:"#pComp"
					}
				}
			})
		</script>



    2. 作用域插槽的使用
     插槽可以控制HTML模板的显示与不显示。作用域插槽( slot-scope)其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件，而作用域插槽可以通过子组件绑定数据传递给父组件。作用域插槽的使用场景:既可以复用子组件的slot,又可以使slot内容不一致。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		<div id="app">
			<book-list :books="bookList">
				<template slot="book" slot-scope="props">
					<li>{{props.bookname}}</li>
				</template>
			</book-list>
		</div>
		<template id="bookComp">
			<div>
				<ul>
					<slot name="book" v-for="book in books" :bookname="book.name"></slot>
				</ul>
			</div>
		</template>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					bookList:[
					{name:"《111》"},
					{name:"《222》"},
					{name:"《333》"}
					]
				},
				components:{
					"book-list":{
						props:["books"],
						template:"#bookComp"
					}
				}
			})
		</script>

	</body>
</html>