组件 - CSDN

Vue组件

万次阅读 多人点赞 2021-01-25 15:43:45

Vue组件（一） Vue组件介绍 Vue组件使用步骤 Vue组件的使用组件中data 和 el 选项 &...

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>

收起

展开全文

vue.js html5 css3

vue中如何创建自定义组件并引入组件【详细教程】

万次阅读 多人点赞 2019-04-25 15:49:42

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

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

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

收起

展开全文

Android组件设计思想
万次下载 热门讨论 2013-10-23 01:11:07
Android应用开发的哲学是把一切都看作是组件。把应用程序组件化的好处是降低模块间的耦合性，同时提高模块的复用性。Android的组件设计思想与传统的组件设计思想最大的区别在于，前者不依赖于进程。也就是说，进程...
收起
(精华)2020年7月12日 vue 组件component的使用
收起
javascript

react函数式组件和类组件创建ref的方法

万次阅读 2019-06-30 15:34:08

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

在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>
		)
	}
}

收起

展开全文

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

万次阅读 2018-06-24 20:31:17

1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法props: { echartStyle: { type: Object, default() { return {} }}, titleText: { type: String, default: '' }, tooltipFormatt...

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子组件向父组件传值（this.$emit()方法）
万次阅读 多人点赞 2018-08-13 19:10:46
子组件使用this.$emit()向父组件传值首先必须在父组件中引用子组件，然后实现传值第一步在父组件中引入子组件使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 ...
收起
Vue js
React中使用路由进行父子组件的通信
万次阅读 2020-06-19 23:10:08
最近我在学习 React.js 框架，在此记录一下我使用 react-router-dom 来实现单页应用（SPA）的路由跳转时，怎么处理父子组件间的通信。本文使用的是 HashRouter。父组件中的路由配置 /** * 我使用了 react-router...
收起
Vue子组件调用父组件的方法
万次阅读 多人点赞 2019-09-03 22:03:43
Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件 <template> <div> <child></child> </div&...
收起
vue之router-view组件的使用
万次阅读 多人点赞 2018-04-26 19:01:08
开发的时候有时候会遇到一种情况，比如：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，蛋是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。...
收起
SpringCloud五大组件详解
万次阅读 多人点赞 2019-04-23 10:15:10
SpringCloud分布式开发五大组件详解服务发现——Netflix Eureka 客服端负载均衡——Netflix Ribbon 断路器——Netflix Hystrix 服务网关——Netflix Zuul 分布式配置——Spring Cloud Config Eureka 一个...
收起
React的无状态组件和纯组件
万次阅读 2019-05-11 21:50:50
react的无状态组件和纯组件一：无状态组件无状态组件可以通过减少继承Component而来的生命周期函数而达到性能优化的效果。从本质上来说，无状态组件就是一个单纯的...
收起
vue子组件给父组件传值
万次阅读 多人点赞 2018-08-21 10:28:12
子组件： <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </...
收起
一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端
万次阅读 2020-05-08 09:35:40
sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端; 同时支持重新签名，覆盖签名，下载，保存等 github地址：https://github.com/mose-x/vue-sign-canvas.git ...
收起
git
Vue.js 父组件向子组件传值和子组件向父组件传值
万次阅读 2019-02-24 21:58:11
父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 &lt;script&gt; // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { ...
收起
Vue子组件给父组件传值父组件给子组件传值 demo 示例代码
千次阅读 2019-08-15 10:38:01
QQ技术交流群173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票 ...3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。效果图：实现代码： &...
收起
react之组件介绍
万次阅读 2019-04-21 09:57:50
ReactJS是基于组件化的开发。那么有些朋友会有疑问，组件是什么？所谓组件，即封装起来的具有独立功能的UI部件。React推荐以组件的方式去重新思考UI构成，将UI上每一个功能相对独立的模块定义成组件，然后将小...
收起
vue中组件通信(父子组件, 爷孙组件, 兄弟组件)
万次阅读 2018-09-04 16:38:06
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而...
收起
分享几个比较好用 js 表格组件、vue 表格组件（持续更新）
万次阅读 2019-06-06 16:23:43
Vue 常用的表格组件（持续更新） element-ui https://element.eleme.cn/2.9/#/zh-CN/component/table 表格组件 iview https://iviewui.com/components/table 表格组件 vxe-table ...
收起
vxe-table
vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
万次阅读 多人点赞 2018-06-07 16:12:08
父组件主动获取子组件的数据和方法 1.调用子组件的时候定义一个ref <headerchild ref="headerChild"></headerchild> 2.在父组件里面通过 this.$refs.headerChild....
收起
vue.js
React的父子组件通信
万次阅读 多人点赞 2019-05-10 17:59:01
首先要知道React的组件间通讯是单向的。
收起
react子组件向父组件传值，父组件获取子组件的数据和方法
万次阅读 2019-03-05 19:17:58
在使用模块化开发，经常会遇到组件之间的传值问题，这篇说一下react子组件如何向父组件传值，父组件如何获取子组件的数据和方法父组件： import React, { Component } from 'react'; import Header from './Header....
收起
react
vue父组件使用子组件函数，vue子组件使用父组件函数
千次阅读 2019-04-29 16:53:50
（1）vue中父组件调用子组件函数用法：子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法详解：父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件...
收起
react父组件调用子组件方法
万次阅读 多人点赞 2018-02-26 09:48:17
前期我们说了父子组件互相通过props传递数据的方法,这个应该都可以理解. 其实今天说的这个父组件直接调用子组件方法, 也类似. 先看代码,比较直观. import React, {Component} from 'react'; export default ...
收起
react
详细教学vue子组件和祖父组件的通讯
千次阅读 多人点赞 2020-09-26 14:25:21
本文的目录1，子组件向祖父组件传值2，祖父组件向子组件传值 1，子组件向祖父组件传值 son是father的子组件，father是grandfather的子组件。 1，son组件 <son @click="clickson"/> <script > export ...
收起
javascript vue.js node.js es6
子组件向父组件传值和父组件向子组件传值
千次阅读 2018-04-18 08:23:07
父组件向子组件传值成功总结如下：子组件在props中创建一个属性，用以接收父组件传过来的值父组件中注册子组件在子组件标签中添加子组件props中创建的属性把需要传给子组件的值赋值给该属性1.在子组件中创建...
收起
React 函数式组件之父组件调用子组件的方法
千次阅读 2020-08-06 09:40:08
最近做一个React项目，所有组件都使用了函数式组件，遇到一个父组件调用子组件方法的问题，让我好一阵头疼。我们都知道，React 中子组件调用父组件方法，使用 props 传递过来就可以在子组件中使用。但是父组件如何...
收起
typescript reactjs javascript
微信小程序中父组件向子组件传值与子组件向父组件传递参数
千次阅读 2020-07-03 11:50:41
wx小程序中父组件向子组件传值可以通过标签属性进行传值父组件子组件中在js文件中的properties中 properties：{ fu：{ type:Number, value:"" } } 以上是子组件向父组件传递参数 wx小程序中子组件向父组件...
收起
vue父组件给子组件传值、方法、整个实例
万次阅读 2019-02-19 10:14:06
父组件给子组件传值 1.父组件调用子组件的时候绑定动态属性 <v-header :title='title' :homemsg='msg'></v-header> 2.在子组件里面通过 props接收父组件传过来的数据 ...
收起

Vue组件

Vue组件

Vue组件

Vue组件使用步骤

1.Vue组件的使用有以下3个步骤：

2.样例Demo

Vue组件使用

组件注册

1.全局注册

2.局部注册

3.组件语法糖

组件中data 和 el 选项

1. 全局注册组件语法

2. 局部注册组件语法

3. 样例Demo

使用 <script> 或 <template> 标签

1.使用 script 标签

2. 使用 template 标签

组件之间的通信

1.组件中通信6个步骤：

2.样例Demo

3.书写错误的两种方式

通过props向子组件传递数据

1. props的值是字符串数组

2. props的值是字符串对象

3.样例Demo

Vue的插槽

1. 插槽的使用

2. 作用域插槽的使用

vue中如何创建自定义组件并引入组件【详细教程】

总结：

vue组件命名问题：

Android组件设计思想

(精华)2020年7月12日 vue 组件component的使用

react函数式组件和类组件创建ref的方法

在react开发过程中，有时会碰到一些需求需要我们去操控dom，那么我们就可以给组件挂载一个ref属性，然后就可以通过ref调用这个组件的方法或者属性之类的。

接下来我们就来看看函数组件和类组件都是如何去挂载创建ref和使用它的：

函数式组件(Hook)：

类组件创建使用ref

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

Vue子组件向父组件传值（this.$emit()方法）

React中使用路由进行父子组件的通信

Vue子组件调用父组件的方法

vue之router-view组件的使用

SpringCloud五大组件详解

React的无状态组件和纯组件

vue子组件给父组件传值

一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端

Vue.js 父组件向子组件传值和子组件向父组件传值

Vue子组件给父组件传值 父组件给子组件传值 demo 示例代码

react之组件介绍

vue中组件通信(父子组件, 爷孙组件, 兄弟组件)

分享几个比较好用 js 表格组件、vue 表格组件（持续更新）

vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法

React的父子组件通信

react子组件向父组件传值，父组件获取子组件的数据和方法

vue父组件使用子组件函数，vue子组件使用父组件函数

react父组件调用子组件方法

详细教学vue子组件和祖父组件的通讯

子组件向父组件传值和父组件向子组件传值

React 函数式组件之父组件调用子组件的方法

微信小程序中父组件向子组件传值与子组件向父组件传递参数

vue父组件给子组件传值、方法、整个实例

组件

idea修改快捷键

java接口

使用vue搭建微信H5公众号项目

我的世界-源码

LeetCode 684. 冗余连接--并查集

具有功能性微米/纳米分层结构的自清洁聚二甲基硅氧烷薄膜

英德谋定红茶产业-农业大健康·李喜贵：功能性农业品牌之路2021-03-02

【Python-随到随学】FLask第二周

一键断网/实现游戏瞬间.物理辅助

精通编译Makefile,Nina, 从底层uboot到Android

过氧化的聚吡咯/石墨烯/金电极阵列上的多巴胺电化学检测

使用 Linux 平台充当 Router 路由器

【Python-随到随学】 FLask第一周

linux基础入门和项目实战部署系列课程

机器学习优化算法-源码

3dmax模型优化插件.mse

使用 `<script>` 或 `<template>` 标签

Vue子组件给父组件传值父组件给子组件传值 demo 示例代码