Vue组件的创建与通信

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量83 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wmklalala/article/details/104928647
版权

1.Vue组件创建的几种方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<!-- 在命名时组件名称可用驼峰命名法，但在使用时要用小写 -->
		<my-com1></my-com1>	
		<mycom2></mycom2>	
		<mycom3></mycom3>
		<mycom4></mycom4>		
	</div>
	
	<template id="templ">
		<div>
			<h3>这是通过template在外部定义的组件结构</h3>
			<h6>有代码的智能提示和高亮</h6>
		</div>
	</template>

	<div id="app2">
		<login></login>
	</div>

	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>

	<script type="text/javascript">
		//注意：不管用哪种方式创建组件，template属性指向的模板内容只能包含唯一的根元素
		var com1 = Vue.extend({
			template:'<h3>这是Vue.extend创建的组件</h3>'
		});
		//Vue.component('组件名称',创建出来的组件模板对象);
		Vue.component('myCom1',com1);

		//不使用中间对象来接收的写法
		Vue.component('mycom2',Vue.extend({
			template:'<h3>这是Vue.extend不使用中间对象创建的组件</h3>'
		}));

		Vue.component('mycom3',{
			template:'<h3>这是Vue.component创建的组件</h3>'
		});

		Vue.component('mycom4',{
			template:'#templ'
		});


	 	new Vue({
	 		el:'#app',
	 		data:{
	 		},
	 	});

	 	var vm2 = new Vue({
	 		el:'#app2',
	 		data:{
	 		},
	 		components:{
	 			login:{
	 				template:'<h3>这是私有组件</h3>'
	 			}
	 		}
	 	});
	</script>
	
</body>
</html>

2.局部组件：声明、挂载、使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		//局部组件：声明、挂载、使用
		//入口组件的声明
		var Apps = {  //预防使用时与HTML的标签混淆，建议组件名首字母大写。声明时用驼峰命名，使用时可用小写，如：声明AppName 使用app-name
			data(){
				return{

				}
			},
			template:`
				<div>
					我是入口组件
				</div>
			`
		}
		var vm = new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			//挂载子组件
			components:{
				App11:Apps
				// Apps
			},
			//父组件可以直接使用
			template:`
				<App11></App11>
				<!--<Apps></Apps>-->
			`
		});
	</script>
	
</body>
</html>

3.全局组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.default{

		}
		.primary{
			background-color: blue;
		}
		.success{
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		//全局组件
		Vue.component('Vbtn',{
			template:`
			<!--插槽 内置组件slot 作为承载分发内容的出口-->
				<button class="default" :class="type">
					<slot>
						按钮
					</slot>
				</button>
			`,
			props:['type']
		});
		//局部组件：声明、挂载、使用
		var Vheader = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是头部组件
				</div>
			`
		}

		var Vasider = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是侧边组件
				</div>
			`
		}

		var Vcontent = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					我是内容组件
					<Vbtn type="primary">普通</Vbtn>
					<Vbtn type="success">成功</Vbtn>
					<Vbtn/>
				</div>
			`
		}

		var App = {  
			data(){
				return{

				}
			},
			template:`
				<div>
					<Vheader/>
					<div>
						<Vasider/>
						<Vcontent/>
					</div>
				</div>
			`
			,
			components:{
				Vheader,
				Vasider,
				Vcontent
			},
		}
		var vm = new Vue({
			el:'#app',
			data(){
				return{

				}
			},
			//挂载子组件
			components:{
				App
			},
			//父组件可以直接使用
			template:`
				<App></App>
			`
		});
	</script>
	
</body>
</html>

4.通过prop往子组件通信

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		//全局组件
		Vue.component('Child',{
			template:`
				<div>
					<p>我是一个孩子组件</p>
					<p>{{childData}}</p>   <!--3.在子组件中使用属性-->
					<input type="text" v-model='childData'/>
				</div>
			`
			,
			props:['childData']  //2.在子组件中用props接收父组件传递的数据
		});

		Vue.component('Parent',{
			data(){
				return{
					msg:"我是父组件的数据" 
				}
			},
			template:`
				<div>
					<p>我是一个父组件</p>
					<Child v-bind:childData = 'msg'/> <!--1.在父组件中绑定自定义属性-->
				</div>
			`
		});
		
		var App = {  
			data(){
				return{

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

				}
			},
			//挂载子组件
			components:{
				App
			},
			//父组件可以直接使用
			template:`
				<App></App>
			`
		});
	</script>
	
</body>
</html>

5.通过事件向子组件发送消息

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app"></div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		//全局组件
		Vue.component('Child',{
			template:`
				<div>
					<p>我是一个孩子组件</p>
					<input type="text" v-model='childData' @input = 'changeValue(childData)'/> <!--2.在子组件中触发原生事件-->
				</div>
			`
			,
			props:["childData"],
			methods:{
				changeValue(val){
					this.$emit('childHandler',val)         //在函数中用$emit触发childHandler
				}
			}
		});

		Vue.component('Parent',{
			data(){
				return{
					msg:"我是父组件的数据" 
				}
			},
			template:`
				<div>
					<p>我是一个父组件</p>
					<Child v-bind:childData = 'msg' @childHandler = 'childHandler'/> <!--1.在父组件中绑定自定义事件-->
				</div>
			`
			,
			methods:{
				childHandler(val){
					console.log(val);
				}
			}
		});
		
		var App = {  
			data(){
				return{

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

				}
			},
			//挂载子组件
			components:{
				App
			},
			//父组件可以直接使用
			template:`
				<App></App>
			`
		});
	</script>
	
</body>
</html>

 

wmklalala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 组件的创建
zhangli0421的博客
10-12 147
1、组件创建—有3中方法 extend() < template id=’’> < script type=‘text/x-template’ id=’’> A、调用Vue.extend()，创建名为haha的组件，template定义模板的标签，模板的内容需写在该标签下 <body> <div id="app"> <haha></haha> <haha></haha&
Vue组件之间的通信
summers_alice的博客
03-06 72
父子组件通信 父组件控制子组件，父组件控制自己的数据变化，将变化后的数据通过props自定义属性传给子组件 1.在组件标签上使用自定属性 2.在组件内部通过props来接受自定义属性 3.接受完了即可以在组件里直接使用 ，但是只能用不能改 <div id='app1'> 这里是实例 {{money}} <hr> <!-- 在t...
如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件
包子大叔的笔记
07-05 6568
如何在Vue3.0+TypeScript中引入JQuery等第三方静态JS文件 把Js放入Public目录, 并在Index.html中添加引用 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
vue3+ts import引入第三方js文件报错解决方法
qq_37656005的博客
02-06 9190
执行 import XXX from ‘XXX.js’ 报错，The requested module ‘xxx.js’ does not provide an export named ‘default’ 可能是第三方文件不支持模块化标准，不能按需导入。在所需的.vue文件里单独引入，最后在head标签里生成js和css，离开页面时移除。在index.html里利用script全局引入。
Vue3 组件之间的通信
muzidigbig的博客
03-22 1345
props父传子 emits子传父 mitt任意组件互传 provide inject跨组件传值 插槽传结构 v-model
vue 组件间的通信
01-07
vue组件间通信 因为vue中每个组件的data数据都是自己专属的，其他组件想要用就要有相应的方法来完成数据的交流。 1、父给子 在组件中如果子组件需要用到父组件的数据该怎么办呢，首先就像现实中的父子，父亲的东西你...
vue组件通信传值操作示例
10-17
本篇将详细讲解 Vue 组件间通信的两种常见方式：父子组件通信和兄弟组件通信。 **1. 父子组件通信** 在 Vue 中，父子组件通信主要通过以下几种方式： - **Props 向下传递数据**：父组件可以通过 `props` 将数据...
vue组件之间的通信
01-03
因此我们可以创建一个组件作为子组件，通过子组件和父组件之间传值的方式实现组件的复用 父组件向子组件传值 父组件向子组件通过 props ，父组件中通过属性绑定的方式传递，在子组件中创建props 数组接收父组件传...
Vue父子组件之间的通信实例详解
10-17
对于更复杂的跨级组件通信，可以创建一个全局的事件总线，或者当多个组件需要共享状态时，使用 Vuex 进行集中式管理。Event Bus 是一个简单的 Vue 实例，用于在非父子关系的组件间通信；Vuex 则是专门用来管理应用...
vue+element UI改进轮播图自适应浏览器窗口大小
wmklalala的博客
04-03 2263
element UI自带的el-carousel高度是固定的，当图片高度过小或者浏览器窗口大小变化时，会出现空隙。我参考的方法来自https://blog.csdn.net/juneoer/article/details/84205231?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc...
vue filters中时间戳转年月日并补零
wmklalala的博客
11-12 826
filters: { timeFormat(timestamp){ var time = new Date(timestamp * 1000); var y = time.getFullYear(); //getFullYear方法以四位数字返回年份 var m = time.getMonth() + 1; // getMonth方法从 Date 对象返回月份 (0 ~ 11)，返回结果需要手动加一 var d = time.getD.
Vue + axios + elementUI实现简单的登录+权限控制（不使用VueX）
wmklalala的博客
08-18 823
实现目标 游客可以浏览网站，登录后的用户可以对网页内容进行编辑与管理。 游客看见的菜单栏： 登录后的菜单栏： 具体思路 1.管理页面需要登录才能进入，在router.js中添加meta 2.前端发送用户名和密码给后端，登录成功后后端返回一个token，保存在localStorage中，并设置isLogin为true。登录成功后跳转到主页。 //Login.vue login(){ this.$refs.loginForm.validate((val.
命令行安装Vue Devtools报错 Error: Cannot find module '@vue-devtools/build-tools'解决办法
wmklalala的博客
04-07 801
我的安装步骤是参考https://www.jianshu.com/p/63f09651724c的，但在npm run build的时候报错了。搜索了一下网上很多人都碰到了类似的问题，大多数是转而下载编译好的文件了，但我就很纳闷为啥别人装得好好的我就不行，一核对发现我跟人家的文件就不一样，没有shells文件夹。 问题出在，从GitHub克隆代码到本地的时候，克隆了所有的分支。我本地文件夹里显示的...
Vue学习记录
wmklalala的博客
08-12 155
8.12 vue.common.js 使Vue支持common vue.esm.browser.js 使Vue支持ES6 runtime 运行时文件 插值表达式{{}} 指令系统v-xxx v-if有更高的切换开销，v-show有更高的初试渲染开销 当DOM节点的属性发生改变时，会对template中的DOM都重新渲染 sublime新建HTML 文件名保存为英文名.html，然后...
Vue Router
wmklalala的博客
01-30 104
使用路由： 1.引包 2.创建实例化VueRouter对象 3.匹配路由规则 4.挂载new Vue()实例化对象 1.基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> ...
vue生命周期
wmklalala的博客
03-11 87
生命周期函数 = 生命周期事件 = 生命周期钩子 组件创建期间的4个钩子函数： beforeCreate 执行时，data和methods中的数据都还没有初始化 created中，data和methods中的数据都已经初始化 vue开始编辑模板，执行vue代码中的指令，在内存中生成编译好的最终模板字符串，然后将该字符串在渲染为内存中的DOM。注意：此时只是在内存中渲染好了模板，并没有...
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 428
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
【Vue】 style中的scoped
DX390609的博客
07-15 127
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
Day04_vue组件_组件通信_todo案例(1).pdf
05-03
"Day04_vue组件_组件通信_todo案例(1).pdf" 本文将深入探讨Vue.js中的组件系统，组件通信及其在实际开发中的应用，通过一个todo案例来阐述相关概念和技术。首先，我们需要理解Vue组件的核心价值在于提高代码复用性...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值