vue的组件化开发

程序员文章站 2024-03-15 11:01:29

...

组件创建的两种方式：
1. 局部声明
2. 全局声明
组件类型
1. 通用组件(表单、弹窗、布局类等)
2. 业务组件(抽奖、机器分类)
3. 页面组件(单页面开发程序的每个页面都是一个组件、只完成功能、不复用)
组件开发三部曲：声明、注册、使用
slot插槽
- slot就是子组件里给dom留下的坑位
- <子组件>DOM</子组件>
- slot是动态的DOM

slot使用示例

<!DOCTYPE html>
<html>
<head>
	<title>slot-插槽</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		var Parent = {
			//slot留坑
			template: `
				<div>
					我是父组件
					<slot name='hello'></slot>
				</div>
			`
		}
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template: `
				<div>
					<parent>
						<div>我是插槽内容1</div>
						<div slot='hello'>我是插槽内容2</div>
						<div>我是插槽内容3</div>
					</parent>
				</div>
			`,
			data: function(){
				return {
					
				}
			}
		})
	</script>
</body>
</html>

ref获取子组件的实例
- 识别: 在子组件或者元素上使用属性ref=“xxxx”
- 获取: this.$refs.xxxx获取元素
- $el是拿其DOM
$parent获取父组件实例(可在子组件直接使用this.即可)

ref的使用示例(获取父组件和子组件):

<!DOCTYPE html>
<html>
<head>
	<title>ref</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		var Child = {
			template: `
				<div>我是子组件</div>
			`,
			data(){
				return {
					msg: 'hello'
				}
			},
			created(){
				//refs获取父组件
				console.log(this.$parent);
			}
		}
		var Parent = {
			//slot留坑
			template: `
				<div>
					我是父组件
					<slot name='hello'></slot>
					<child ref='childs'></child>
				</div>
			`,
			components:{
				Child
			},
			data(){
				return {
					parents:'我是父组件'
				}
			},
			mounted(){
				//refs获取子组件
				//console.log(this.$refs.childs.$el);  
				//console.log(this.$refs.childs);
			}

		}
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template: `
				<div>
					<parent>
						<div slot='hello'>我是插槽内容2</div>
					</parent>
				</div>
			`,
		})
	</script>
</body>
</html>

父子组件之间的通信
父传子
1. 父用子的时候通过属性传递
2. 子要声明props:[‘属性名’]来接受
3. 收到就是自己的了，随便使用
  - 在template中直接使用
  - 在js中this.属性名使用

父传子使用示例

<!DOCTYPE html>
<html>
<head>
	<title>组件间的通信-父组件传给子组件</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		//子组件接收父组件传过来的数据
		var Child = {
			template: `
				<div>我是子组件{{ sendchild }}</div>
			`,
			props:['sendchild']
		}

		//父组件传递数据sendchild给子组件
		var Parent = {
			components:{
				Child
			},
			template: `
				<div>
					我是父组件
					<child sendchild='父组件传给你的'></child>
				</div>
			`
		}

		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template: `
				<div>
					<parent></parent>
				</div>
			`,
			data: function(){
				return {
					
				}
			}
		})
	</script>
</body>
</html>

子传父
1. 子组件通过$emit(‘自定义事件名’, 变量1, 变量2)触发
2. 父组件@自定义事件名='事件名’监听

子组件传数据给父组件示例

<!DOCTYPE html>
<html>
<head>
	<title>组件间的通信-子组件传给父组件</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		//子组件发送数据给父组件
		var Child = {
			template: `
				<div>
					我是子组件
					<button @click='sendparent'>反馈数据给父组件</button>
				</div>
			`,
			methods:{
				sendparent(){
					this.$emit('baba', '这是子组件给你的数据');
				}
			}
		}

		//父组件接收子组件传过来的数据
		var Parent = {
			components:{
				Child
			},
			template: `
				<div>
					我是父组件{{ msg }}
					<child @baba='reverse'></child>
				</div>
			`,
			data(){
				return {
					msg: ''
				}
			},
			methods:{
				reverse(val){
					this.msg = val
				}
			}
		}

		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template: `
				<div>
					<parent></parent>
				</div>
			`,
			data: function(){
				return {
					
				}
			}
		})
	</script>
</body>
</html>

非父子组件之间的通信
1. 创建一个空实例(bus*事件总线也可以叫做中间组件)
2. 利用emit on的触发和监听事件实现非父子组件之间的通信

上一篇： Silverlight中xaml之间的跳转方案之一

下一篇： MySQL数据库操作（四）——多表之间的关系

vue的组件化开发

vue2.0中的组件通信3——兄弟组件之间通信

Vue 父子组件间的通信

vue踩坑填坑（二）：组件之间的传值问题

vue-组件的三种注册形式

vue的组件化开发

Vue.js中的组件通信

vue2.0 父子组件之间的通信问题

Vue学习日记2——组件注册的三种方式

vue2.0 同级组件之间的通信

vue组件for循环无效果的原因之一