vue

vue组件

组件(compoent)是vue最强大的功能之一。

称之为元素,组件可以扩展HTML中的元素,封装可重用的代码。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEKCGko6-1604129087137)(C:\Users\DELL\AppData\Local\Temp\1564645532592.png)]

如何注册一个全局组件:

语法:Vue.compoent(tagName,Options)

tagName就是组件名,Options是配置的选项,用一下方式调用组件

语法:

全局组件

所有实力都可以用到全局组件

<body>
		<div id="app">
			<aaa></aaa>
		</div>
		<script>
			//注册
			Vue.component('aaa',{
				template:'<h1>这就是我自定义的全局组件</h1>'
			})
			//创建实例
			new Vue({
				el:"#app"
			})
		</script>
	</body>

局部组件

<body>
		<div id="app">
			<aaa></aaa>
		</div>
		<script>
			var child ={
				template:'<h1>我是局部组件</h1>'
			}
			//创建实例
			new Vue({
				el:"#app",
				components:{
					aaa:child
				}
			})
		</script>
	</body>

prop

prop 是父组件用来传递数据的一个自定义的属性

父组件通过prop把数据传递给子组件,子组件就需要显示的方式声明“prop”

<body>
		<div id="app">
			<child msg = "hello"></child>
		</div>
		<script>
			Vue.component('child',{
				//声明props
				props:['msg'],
				//可以在vm实例中进行像“this.message”这样的使用
				template:'<span>{{msg}}</span>'
			})
			new Vue({
				el:'#app'
			})
		</script>
	</body>

动态prop

类似于用v-bind绑定HTML特性的一个表达式,我们也可以用v-bind动态绑定prop的值到我们的父组件的数据中。

<body>
		<div id="app">
			<div>
				<input v-model="parentMsg" /><br />
				<child v-bind:message="parentMsg"></child>
			</div>
			<script>
				Vue.component('child',{
					props:['message'],
					template:'<span>{{message}}</span>'
				})
				
				//创建实例
				new Vue({
					el:'#app',
					data:{
					parentMsg:'父组件内容'	
					}
				})
			</script>
		</div>
	</body>

自定义事件

父组件是使用props传递数据给子组件,子组件想要把数据传递回去,就需要我们自定义事件

使用v-on指令绑定自定事件

$on(eventName)监听事件

$emit(eventName)触发事件

<body>
			<div id="app">
				<div id="counter-event-example">
				  <p>{{ total }}</p>
				  <button-counter v-on:increment="incrementTotal"></button-counter>
				  <button-counter v-on:increment="incrementTotal"></button-counter>
				</div>
			</div>
			
			<script>
			Vue.component('button-counter', {
			  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
			  data: function () {
			    return {
			      counter: 0
			    }
			  },
			  methods: {
			    incrementHandler: function () {
			      this.counter += 1
			      this.$emit('increment')
			    }
			  },
			})
			new Vue({
			  el: '#counter-event-example',
			  data: {
			    total: 0
			  },
			  methods: {
			    incrementTotal: function () {
			      this.total += 1
			    }
			  }
			})
			</script>
			</body>

回顾:

1、注册一个全局的组件

2、注册局部组件

3、props父组件对子组件传值

4、自定义事件,子组件像父组件传值

作业:

1、搞清楚什么是组件,并熟练使用祖册全局组件和局部组件

		    }
		  }
		})
		</script>
		</body>

## 回顾:

1、注册一个全局的组件

2、注册局部组件

3、props父组件对子组件传值

4、自定义事件,子组件像父组件传值

## 作业:

1、搞清楚什么是组件,并熟练使用祖册全局组件和局部组件

2、熟练使用组件进行传值
tea_year CSDN认证博客专家 大司徒
主要研究方向为大数据、人工智能、JAVA、数据库 、前端开发、产品研发,曾经服务过大型上市国企IT部门,软件企业联合创始人,喜欢软件研发管理、技术营销!
©️2020 CSDN 皮肤主题: 护眼 设计师:闪电赇 返回首页
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值