VUE基础开发-------2---组件化开发

最新推荐文章于 2024-08-02 09:05:29 发布
最新推荐文章于 2024-08-02 09:05:29 发布
阅读量177 收藏
点赞数
分类专栏： VUE XXD
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28764557/article/details/102662220
版权
XXD 同时被 2 个专栏收录
73 篇文章 0 订阅
订阅专栏
VUE
6 篇文章 0 订阅
订阅专栏

组件开发参考：https://www.cnblogs.com/yinhaiying/p/10985476.html

分vue页面的组件引入：https://blog.csdn.net/zhiyikeji/article/details/84202808

组件开发的三部曲：声明，注册，使用

组件和new Vue是一样的。

-----------局部的

 声明：

注册，使用：

------------全局的

注意组件是怎么使用的，组件就像一个div一样。

完整代码：

<!DOCTYPE html>
<html>
<head>
	<title>组件化开发</title>
</head>
<body>
	<div id="app">
		
	</div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		var MyHeader={// 1------------------：声明组件
			template:`
				<div>我是头部</div>
			`,

		}
		var MyBody=Vue.extend({//原来是这样写的,后来就简化为上面的方式
			template:`
				<div>我是身体</div>
			`
		})
		//这个是语法糖，比较简洁
		// var MyBody={
		// 	template:`
		// 		<div>我是身体</div>
		// 	`
		// }
		Vue.component('MyFooter',{//全局创建就不用注册了
			template:`
				<div>我是尾部</div>
			`
		})
		new Vue({
			el:'#app',
			//2--------------------------：注册组件
			components:{
				MyHeader,
				MyBody
			},
			template:`
				<div>
					<my-header></my-header>//3-------------------：使用
					<my-body></my-body>
					<my-footer></my-footer>
				</div>
			`,
			data(){
				return{}
			},
		})
	</script>
</body>
</html>

------------------------------------2-1-----------------------------------------

slot就是让dom动态的插入进去。

 

组件：声明 注册 使用三部曲

------

插槽的用法1，普通插槽，就是我们在使用组件的时候，引入组件是不能在组件里面加div的，要想加就得在组件的代码里面加插槽，一个插槽可以插入多个div：

var Parent={
			template:`
				<div>
				我是父组件
				<div>其他</div>
				<slot></slot>
				</div>
			`,
			data(){
				return {
					
				}
			},
			mounted(){
				// console.log(this.$refs.childs)
			}
		}
		
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
					<parent>
						<div>我是插槽</div>
						<div>我是插槽2</div>
					</parent>
				</div>
			`,
			data(){
				return{}
			},
		})

插槽的用法2：具名的插槽


		var Parent={
			template:`
				<div>
				我是父组件
				<div>其他</div>
				<slot name="hello"></slot>
				</div>
			`,
			data(){
				return {
					
				}
			},
			mounted(){
				// console.log(this.$refs.childs)
			}
		}
		
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
					<parent>
						<div slot='hello'>我是插槽</div>
						<div>我是插槽2</div>// 这个不显示
					</parent>
				</div>
			`,
			data(){
				return{}
			},
		})

 插槽的用法3：组件嵌套组件，ref在父组件上获取子组件的实例

var Child={
			template:`
				<div>我是子组件</div>
			`,
			data(){
				return {
					msg: 'hello'
				}
			},
			created(){
				
			}

		}
		
		
		var Parent={
			template:`
				<div>
				我是父组件
				<div>其他</div>
				<slot name="hello"></slot>
				<child ref='childs'></child>// 3.使用
				</div>
			`,
			data(){
				return {
					
				}
			},
			components:{
				Child  // 2.注册
			},
			mounted(){
				console.log(this.$refs.childs.$el)// this.$refs.childs可以获取很多el事其中之一
				console.log(this.$refs.childs.msg)// 可以拿数据
			}
		}
		
	
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
					<parent>
						<div slot='hello'>我是插槽具名的</div>
						<div>我是插槽2</div>
					</parent>
				</div>
			`,
			data(){
				return{}
			},
		})

获取父亲的实例：

var Child={
			template:`
				<div>我是子组件</div>
			`,
			data(){
				return {
					msg: 'hello'
				}
			},
			created(){
				console.log(this.$parent.parents);// parents是值
			}

		}
		
		
		var Parent={
			template:`
				<div>
				我是父组件
				<div>其他</div>
				<slot name="hello"></slot>
				<child ref='childsddd'></child>
				</div>
			`,
			data(){
				return {
					parents:'我是父亲组件'
				}
			},
			components:{
				Child
			},
			mounted(){
				console.log(this.$refs.childsddd.$el)
				console.log(this.$refs.childsddd.msg)
			}
		}
		
	
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
					<parent>
						<div slot='hello'>我是插槽具名的</div>
						<div>我是插槽2</div>
					</parent>
				</div>
			`,
			data(){
				return{}
			},
		})

在使用组件的过程中，是不能在组件中间插入元素的，如何解决这个问题呢？

这样是不可以的。

在父组件声明一个插槽，留个坑。

在使用的时候就可以了：

<div>
	<parent>
		<div>我是插槽内容111111111</div>//不可以
		<div slot='hello'>eeee我是插槽内容2</div>//可以
	</parent>
</div>

应用在组件嵌套组件的情况上。

mounted是数据加载完毕dom挂载完毕

created是dom挂载完毕

代码：

<!DOCTYPE html>
<html>
<head>
	<title>组件化开发</title>
</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(){//数据加载完毕但是没挂DOM
				console.log(this.$parent)
			}

		}
		var Parent={
			template:`
				<div>
				我是父组件
				<slot name='hello'></slot>
				<child ref='childs'></child>//使用 ref
				</div>
			`,
			components:{
				Child//在父组件注册子组件
			},
			data(){
				return {
					parents:'我是父组件'
				}
			},
			mounted(){
				// console.log(this.$refs.childs.$el)  //和这个this.$refs.childs是对应的，可以拿到子组件的所有的东西
			}
		}
		
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
					<parent>
						<div>我是插槽内容</div>
						<div slot='hello'>我是插槽内容2</div>
					</parent>
				</div>
			`,
			data(){
				return{}
			},
		})
	</script>
</body>
</html>

----------------------------------------2-2----------------------------------------------------------------

父子组件的通信：

    

  父亲给儿子：子组件props:['sendchild']，父组件在使用子组件的时候定义一个属性sendchild父亲组件给这个属性赋值，子组件直接{{sendchild}}就可以了。

//子组件定义好了props直接用
		var Child={
			template:`
				<div>
				我是子组件------------------------------{{sendchild}}
				</div>
			`,
			props:['sendchild'],
			methods:{
				
			}

		}
		//父组件通过属性sendchild传递了数据给子组件
		var Parent={
			template:`
				<div>
				我是父组件
				<child sendchild='父亲给你的'></child>

				</div>
			`,
			components:{
				Child
			},
			data(){
				return {
					msg:''
				}
			},
			methods:{

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

				}
			},
		})

  儿子给父亲：定义事件this.$emit('baba','这是儿子组件给你的')，在父组件的子区域@baba='reserve' 写reserve函数。

//子组件定义好了props直接用
		var Child={
			template:`
				<div>
				<button @click='sendparent'>我要反馈东西给父亲</button>
				</div>
			`,
			methods:{
				sendparent(){
					this.$emit('baba','这是儿子组件给你的','这是儿子组件给你的1')
				}
			}

		}
		//父组件通过属性sendchild传递了数据给子组件
		var Parent={
			template:`
				<div>
				我是父组件{{ msg }}
				<child @baba='reserve'></child>

				</div>
			`,
			components:{
				Child
			},
			data(){
				return {
					msg:''
				}
			},
			methods:{
				reserve(val,val1){
						this.msg=val+val1
				}
			}
		}
		
		new Vue({
			el:'#app',
			components:{
				Parent
			},
			template:`
				<div>
				<parent></parent>
				</div>
			`,
			data(){
				return {

				}
			},
		})

 

------------------2-3---------------

非父子组件的通信：

0.创建三个组件 头部 尾部 的身体

1.创建空的实例：Vue.prototype.$bus=new Vue()

2.传入数值：this.$bus.$emit('sending','我是底部的数据')

3.监听：this.$bus.$on('sending',val=>{
                    this.headermsg=val
                })

代码：


		Vue.prototype.$bus=new Vue()
		
		var MyHeader={
			template:`
				<div>
				我是头部
				{{ headermsg }}
				</div>
			`,
			data(){
				return {
					headermsg:'我是头部的信息'
				}
			},
			created(){
				// var self=this
				// self.$bus.$on('sending',function(val){
				// 	self.headermsg=val
				// })
				this.$bus.$on('sending',val=>{//不加箭头表达式this是指的是$bus,箭头函数改this的指向。
					this.headermsg=val
				})
			}
		}
		var MyBody={
			template:`
				<div>我是身体</div>
			`,
		}
		var MyFooter={
			template:`
				<div>我是底部<button @click='sendhead'>我要跟头部通信</button></div>
			`,
			methods:{
				sendhead(){
					this.$bus.$emit('sending','我是底部的数据')
				}
			}
		}
		new Vue({
			el:'#app',
			components:{
				MyHeader,
				MyBody,
				MyFooter
			},
			template:`
				<div>
					<my-header></my-header><hr>
					<my-body></my-body><hr>
					<my-footer></my-footer>
				</div>
			`,
			data(){
				return {}
			},
		})

注意：

这个this是$bus的空实例。

注意：使用箭头函数修改this的指向：

规则：指向外面包裹他不是箭头函数的作用域，就是created的作用域，就是Header。

------------------------------2-4----------------------------------------------

生命周期：https://www.jianshu.com/p/5cd198945d41

                 https://www.cnblogs.com/whh-16/p/9092539.html

没上课。

----------2-5-------------

nzch
关注
专栏目录
开始学习Vue2（脚手架，组件化开发）
Mangcun_tutu的博客
01-23 1211
在声明自定义属性时，可以通过1ype来定义属性的值类型。是组件的自定义属性，在封装通用组件的时候，合理地使用。当组件在使用中，标签中不需要嵌套东西可以使用单标签。，所有的功能与交互都在这唯一的一个页。的意思时谁用我这个组件就必须要传递。是一个支持组件化开发的前端框架。在组件复用的时候，就使用双标签。，从而方便项目的开发和维护。声明组件、注册组件、使用组件。以极大的提高组件的复用性!要做的事情很单纯：通过。中规定：组件的后缀名是。中的数据都是可遗可写的!组件化开发指的是：根据。的值，如果不传就会报错。
vue3.0 vue-quill-editor.rar
09-19
Vue-Quill-Editor是一款基于Quill的 Vue.js 富文本编辑器组件，提供了丰富的文本格式化选项，如字体、字号、颜色、列表等，同时支持图片和视频的插入。在Vue3.0环境下使用Vue-Quill-Editor，需要确保组件与新版本的...
Vue2组件化开发
m0_47807991的博客
03-09 980
【自制】coderwhy老师vue2教学视频学习笔记
vue2学习 -- 组件化编程
最新发布
2302_79523175的博客
08-02 666
组件的定义——实现应用中局部功能代码和资源的集合。备注：不用使用脚手架时，会导致后续组件不能渲染。三、使用组件（写组件标签）一、定义组件（创建组件）一、如何定义一个组件？
Vue2（组件开发）
passerby的博客
08-14 2783
请大家多多指教
vue2组件化开发
weixin_47039303的博客
10-24 159
1.思想 1.一个应用的所有逻辑放在一个页面会非常复杂,不利于拓展 2.一个应用分为一个个页面,每一个页面又分成多个独立的组件 3.每个组件都有独立的功能 2.使用组件的场景:可以独立出来的应用才可以使用组件化开发 3.组件分类 : 1.页面级别的组件 2. 可复用的组件 3.与业务无关的组件 4.使用 Vue.component(‘todo-item’, { props:[‘title’], template: 'xxxxx {{title}} xxxxx {{title}} xxxxx {{title}
vue2-组件化开发
weixin_50402587的博客
04-05 915
组件化处理组件的边界情况parentchildrefprovide&injectattrs &listener 处理组件的边界情况 parent parent.vue <template> <div class="parent"> parent <child></child> </div> </template> data () { return { title: '获取父组
vue-element-admin中文版本
07-20
Vue.js 是一款轻量级且功能强大的前端JavaScript框架，它以组件化开发为核心，使得构建用户界面更加便捷高效。Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI ...
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
Vue.js 是一个轻量级且高性能的前端JavaScript框架，它采用了声明式的数据绑定和组件化开发方式，使得代码结构清晰，易于维护。Vue-Sku-Form 充分利用了 Vue 的这些特性，提供了可复用、可定制化的组件，方便开发者...
vue-ele-form-generator可视化表单设计工具-其他
06-12
vue-ele-form-generator是专为vue-ele-form开发的可视化表单设计工具，并且支持vscode 插件、cli 本地启动、在线设计多种方式，让表单开发的效率更上一层楼！ vue-ele-form-generator特性： 1、提供vscode 插件更...
vue-testcase-minder-editor vue2.0思维导图实例
04-28
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。在“vue-testcase-minder-editor vue2.0思维导图实例”中，我们主要探讨的是如何利用Vue 2.x版本结合特定的插件来创建一个交互式的...
Vue 组件化
Ulrica_Amaris的博客
03-30 248
什么是组件化？ 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。 但如果，我们讲一个页面拆分成一个个小的功能块 每个功能块完成属于自己这部分独立的功能 那么之后整
Vue2 基础三组件化开发
jiuchabaikaishui的专栏
03-18 526
组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。
vue.js组件开发
weixin_33698823的博客
06-29 166
1. ES6语法 ES6是JavaScript语言的新版本，它也可以叫做ES2015，之前介绍的JavaScript属于ES5，ES6在它的基础上增加了一些语法，ES6是未来JavaScript的趋势，而且vue组件开发中会使用很多的ES6的语法，所以掌握这些常用的ES6语法是必须的。 1.1 变量声明let和const let和const是新增的声明变...
Vue2组件开发
weixin_53945110的博客
03-06 91
vue2组件化开发
再谈Vue2组件库开发
weixin_34242509的博客
07-09 282
导读：本文是 Vue 2.0 组件库开发系列文章第二篇。继第一篇《漫谈Vue 2组件库》后，再来聊一聊基于 webpack 脚手架开发一个 Vue 2.0 移动端 UI 组件库的经验与思考。 前文再续，书接上回。话说 Vue 组件库开发那些事儿。 我们的 Vue 组件库开发经验主要来自于 NutUI 组件库的开发实践，这是我们从众多项目中提炼的一个基...
VUE基础开发-------1---基础
qq_28764557的博客
10-22 197
data里面声明变量然后引用。 如何用node下载，在路径上写cmd，然后进入控制台写cnpm install vue即可下载。 引包：引入vue.js 留坑：写个div给类名或者id名称 实例化：new Vue 注意下这个写法，会被替代了。就是模板替代了id=app。 data要写函数形式的。 template的根节点只能有一个。 代码： <!DOCTYPE h...
vue教程2-组件化开发
weixin_34228617的博客
04-02 206
全局组件 <div id="app"> <cs1></cs1> </div> <script> Vue.component('cs1',{ data(){return {count:0}}, templat...
vue2脚手架组件化开发
m0_71345904的博客
08-05 901
组件就是用来实现局部（特定功能）效果的代码集合（html、css、js、image....)）
使用vue-cli3开发Chrome插件全攻略
"这篇文章主要介绍了如何使用vue-cli3来开发Chrome插件，通过vue-cli-plugin-chrome-ext插件实现快速编译打包，并引入了element-ui作为UI框架进行按需加载，以减小插件的文件大小。" Vue CLI 3 是 Vue.js 官方提供...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值