文档章节

vue组件开发

wshining
 wshining
发布于 2017/09/10 16:59
字数 1007
阅读 2532
收藏 129
点赞 4
评论 9

什么是vue组件

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式。

组件使用步骤

1. 定义组件

    var myComponent = Vue.extend({
		template:"<h2>this is my first component</h2>"
	});

2. 注册组件

	 全局注册组件
     Vue.component('myComponent',myComponent)
	 局部注册组件
	 var apk = new Vue({
	    el:"#apk",
	    components:{
	 	"myComponent":myComponent
	   }
     })

3. 使用组件

	<div id="apk">
		<my-component></my-component>
	</div>

4. 上面的定义过程比较繁琐,也可以不用每次都调用Vue.component和Vue.extend方法:

    // 在一个步骤中扩展与注册
    Vue.component('my-component', {
    	template: '<div>A custom component!</div>'
    })
    
    // 局部注册也可以这么做
    var Parent = Vue.extend({
   		 components: {
	    	'my-component': {
	    		template: '<div>A custom component!</div>'
	   		 }
    	}
    })

组件常用方法使用

1. 嵌套组件

组件本身也可以包含组件,下面的parent组件就包含了一个命名为child-component组件,但这个组件只能被parent组件使用:

	var myComponent = Vue.extend({
		template:"<h2>this is my first component</h2>"
	});
	var myComponent2 = Vue.extend({
		template:"<h2>嵌套组件:<myComponent1></myComponent1></h2>",
		components:{
			"myComponent1":myComponent
		}
	});

2. 父子组件之间的通信

使用 v-bind: (或直接用冒号) 传递数据,使用props接收数据,先看如下代码:

	<!DOCTYPE html>
	<html lang="en">
	
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	
	<body>
	    <div id="box">
	        <input type="text" name="" value="" v-model="inp">{{inp}}
	        <br />
	        <my-con msg1="hello" msg2="world" v-bind:child-inp="inp" v-on:listen="change"></my-con>
	        <br />
	    </div>
	    <script>
	    var testconponent = Vue.extend({
	        props: ['msg1', 'msg2', 'childInp'],
	        template: "<h2> {{msg1}} {{msg2}}  {{childInp}}<br/><button [@click](https://my.oschina.net/willclick) = 'toUpper' >btn</button></h2>",
	        methods: {
	            toUpper: function() {
	               this.$emit('listen', 'abc');
	            }
	        }
	    });
	    Vue.component('my-con', testconponent);
	    new Vue({
	        el: '#box',
	        data(){
	        	return {
	        		inp:''
	        	}
	        },
	        methods:{
	        	change(data){
	        		this.inp = data;
	        	}
	        }
	    })
	    </script>
	</body>
	
	</html>

3. 非父子组件之间的通信

上面我们使用props只能解决父子组件之间的通信,当两个兄弟关系的组件,就不能这样传递了
兄弟节点之间需要使用 事件的触发方法 $emit去实现

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	    <script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
	   <div id="box">
	       <com-a></com-a> <!-- 调用com-a组件 -->
	       <com-c></com-c><!-- 调用com-c组件 -->
	   </div>
	<script>
	   var Event=new Vue();  // 声明一个独立的空Vue公用实例,用来触发通讯的事件
	
	    var a={
	        template:'<div><span>我是a组件,我的数据内容是{{msga}}</span><br><input type="button" value="我要发送数据" @click="send"></div>',
	        data(){
	            return{
	             msga:'我是a数据,我要发送给兄弟组件'
	            }
	        },
	        methods:{
	            send(){
	                Event.$emit('a-msg',this.msga)  //触发前面 Event 公用示例的方法,那么别的地方就可以想办法监听接收这个事件。参数(事件名,传输的值)
	            }
	        }
	    };
	    var c={
	        template:"<div><h3>这是C组件</h3><span>我从A里面接受的数据:{{a}}</span></div>",
	        data(){
	            return{
	                a:''
	            }
	        },
	        mounted(){    //这里的mouted表示当组件和页面挂载完成的时候,需要执行的函数
	            var _this = this;  //因为在Event.on内部的this是指向 Event实例的,所以这里,先使用 _this将this存起来,后面就可以使用了。
	            Event.$on('a-msg',function (a) {  //使用on监听事件 a-msg,这样当a组件中使用 emit主动触发了 Event实例的a-msg事件之后,这里就可以接收到
	                alert('触发了接收');
	                _this.a = a;
	            })
	        }
	    };
	    new Vue({
	        el:'#box',
	        components:{
	            'com-a':a,
	            'com-c':c
	        }
	    })
	</script>
	</body>
	</html>

代码中,我们声明了一个独立的空Vue公用实例,用来触发通讯的事件。在a组件中使用 $emit触发事件,在 c组件中使用on监听事件,就可以实现数据的传递了。

4. 动态创建组件

使用is属性动态添加组件

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
	
	</head>
	<body>
	
	<div id="dynamic">
		<button id="home">Home</button>
		<button id="posts">Posts</button>
		<button id="archive">Archive</button>
		<br>
		<component :is="currentView"></component>
		</div>
	
		<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
		<script>
		var vue = new Vue({
		    el:"#dynamic",
			data: {
			currentView: "home"
			},
			components: {
				"home":{
					template: "<h2>home</h2>"
				},
				"posts": {
					template: "<h2>Posts</h2>"
				},
				"archive": {
					template: "<h2>Archive</h2>"
				}
			}
		});
		document.getElementById("home").onclick = function(){
		vue.currentView = "home";
		};
		document.getElementById("posts").onclick = function(){
		vue.currentView = "posts";
		};
		document.getElementById("archive").onclick = function(){
		vue.currentView = "archive";
		};
		</script>
	</body>
	</html>

© 著作权归作者所有

共有 人打赏支持
wshining
粉丝 14
博文 64
码字总数 41353
作品 0
深圳
前端工程师
加载中

评论(9)

魏希权
魏希权
ztw2011
ztw2011
����@ztw2010
SimonYe
SimonYe
可以
ztw2011
ztw2011
厉害@ztw2010
达浪啊达浪
达浪啊达浪
2.0 注册事件部分可以简写的 myComponent
ztw2010
ztw2010
vue大发好
曾建凯
曾建凯
不错不错,简单扼要,概括性强��
莫默磨墨先生
莫默磨墨先生
不错:thumbsup:
Vue.js视频教程

Vue.js 1.0 免费中文视频教程在线观看和网盘下载地址收集 原文地址:http://phpecshop.blog.51cto.com/6296699/1834208 NideShop:基于Node.js+MySQL开发的高仿网易严选开源B2C商城(微信小...

ch10mmt ⋅ 2016/08/04 ⋅ 0

Vuebnb:一个用vue.js和Laravel构建的全栈应用

今年我一直在写一本新书叫全栈Vue网站开发:Vue.js,Vuex和Laravel。它会在Packt出版社在2018年初出版。 这本书是围绕着一个案例研究项目,Vuebnb,简单克隆Airbnb。在这篇文章中,我会把它如...

笔阁 ⋅ 04/16 ⋅ 0

入职第三天:vue-loader在项目中是如何配置的

什么是vue-loader 这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少? 这是我今天的回答,确实,vue-loader是webpack的一个loader,用...

闰土大叔 ⋅ 06/02 ⋅ 0

[译] Vue.js 还是 React?你会选择哪一个?为什么?

原文地址:Vue.js or React ? Which you would chose and why? 原文作者:evilpingwin 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:allenlongbaobao 校对者:Kyl...

allenWang ⋅ 06/17 ⋅ 0

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704 ⋅ 2017/04/20 ⋅ 0

mpvue: vuejs和小程序碰撞出来的火花

微信自推出小程序以来,热度一直居高不下,各大公司开始专门开发小程序,但是小程序自定义的wxml和wxss和自己定义的语法,让被三大框架统治的前端江湖头疼不易,因为需要专门为小程序开发一...

蜗牛老湿 ⋅ 05/18 ⋅ 0

📦vue组件发布npm最佳实践

我们经常使用组件,二次封装或创造组件,在团队内部使用; 可当我们想通过npm分享组件时,却没了之前的得心应手,本文旨在帮助大家在可以更轻松地发布组件 首先,把vue组件发布到npm这件事可以...

levy9527 ⋅ 06/15 ⋅ 0

Vue进阶(六):组件之间的数据传递

Vue进阶(六):组件之间的数据传递 Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用脚手架工具 vue-cl...

sunhuaqiang1 ⋅ 05/05 ⋅ 0

你或许不知道Vue的这些小技巧

前言 用Vue开发一个网页并不难,但是也经常会遇到一些问题,其实大部分的问题都在文档中有所提及,再不然我们通过谷歌也能成功搜索到问题的答案,为了帮助小伙伴们提前踩坑,在遇到问题的时候...

OBKoro1 ⋅ 06/04 ⋅ 0

西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理。 情景再现...

闰土大叔 ⋅ 04/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部