vue的组件化开发

最新推荐文章于 2023-07-12 19:12:14 发布

kangswx

最新推荐文章于 2023-07-12 19:12:14 发布

阅读量146

点赞数

分类专栏： vue 文章标签： vue组件 vue插槽 vue父子组件之间通信 vue非父子组件之间通信

本文链接：https://blog.csdn.net/kangswx/article/details/103337555

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

组件创建的两种方式：
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的触发和监听事件实现非父子组件之间的通信

kangswx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue的组件化开发

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

扫一扫