Vue：简单了解组件

Vue组件基础–简单了解vue组件
Vue组件是什么？

组件就像是提前做好的模具，使用时拿出来就行，可以重复调用，它跟普通的Vue有一样的属性：

1、data （数据存放）
2、computed（计算属性）
3、watch（监听属性）
4、methods（方法存放）
熟悉的人应该看出来了，组件并没有el属性，组件没有根节点相关的属性。

组件的data必须是一个函数，这样多个组件才不会相互影响。

data: function () {
  return {
    count: 0
  }
}

  

 

  
1
  
2
  
3
  
4
  
5
 

组件可以通过Prop 对子组件进行传值，可以使用v-bind动态传递prop的数据

<div id="app">
	<my-p v-for="item in list" 
	:title="item.title"><!-- 使用v-bind(:)动态传递prop -->
	</my-p>
</div>

  

 

  
1
  
2
  
3
  
4
  
5
 

Vue.component('my-p',{
	props:['title'],  //props向子组件传递数据
	template:'<p>{{title}}</p>'
})
new Vue({
	el:"#app",
	data:{
		list:[
			{ id: 1, title: 'My journey with Vue' },
			{ id: 2, title: 'Blogging with Vue' },
			{ id: 3, title: 'Why Vue is so fun' }
		]
	}
})


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

组件的监听子组件事件
主要通过子组件的 $emit 方法并传入事件名触发事件
emit可以使用第二个参数向上抛值，监听的父组件通过event获取

<div id="app">
	<div :style="{fontSize:size + 'px'}"> <!-- 字体大小通过size动态获取 -->
		<my-p v-for="item in list"
		:title="item.title" 
		@addsize="size += $event"> <!-- $event获取子组件通过$emit抛的值 -->
		</my-p>
	</div>
</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

Vue.component('my-p',{
	props:['title'],  //props向子组件传递数据
	template:`<div>
				<p>{{title}}</p>
				<button @click="$emit('addsize',10)">点击放大</button>
			</div>`
			//子组件通过 $emit  方法并传入事件名触发事件
			//$emit可以使用第二个参数向上抛值，监听的父组件通过$event获取
})
new Vue({
	el:"#app",
	data:{
		list:[
			{ id: 1, title: '这是第一个' },
			{ id: 2, title: '这是第二个' },
			{ id: 3, title: '这是第三个' }
		],
		size:14
	}
})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

组件中v-model的实现
当input事件触发时,通过$emit对数据进行抛出

<div id="app">
	<!-- 组件中v-model的使用 -->
	<my-input v-model="myText"></my-input>
	<p>{{myText}}</p>
</div>

  

 

  
1
  
2
  
3
  
4
  
5
 

Vue.component('my-input', {
 props: ['value'],//通过props动态数据传递
 template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
  // input事件触发时,通过$emit对数据进行抛出
})
new Vue({
	el:"#app",
	data:{
		myText:''
	}
})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

动态组件
通过:is实现tab切换效果

<div id="app">
	<button
	v-for="item in list"
	@click="currList = item">{{item}}</button>
	 <!-- 通过点击的item给currList赋值 -->
	<component :is="curr"></component> 
	<!-- 通过:is="curr"的curr值进行组件的切换 -->
</div>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

Vue.component("my-div", {
	template: "<div>Home component</div>"
});
Vue.component("my-div2", {
	template: "<div>Posts component</div>"
});
new Vue({
	el:"#app",
	data:{
		list:['div','div2'],
		currList:'div'
	},
	computed:{
		curr: function() {
			return "my-" + this.currList;  
			//修改组件的curr值改变组件的显示
		}
	}
})

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
 

文章来源: jiangwenxin.blog.csdn.net，作者：前端江太公，版权归原作者所有，如需转载，请联系作者。

原文链接：jiangwenxin.blog.csdn.net/article/details/108451660