文档章节

vue组件开发

wshining
 wshining
发布于 2017/09/10 16:59
字数 1007
阅读 2.7K
收藏 131

码上生花,ECharts 作品展示赛正式启动!>>>

什么是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>

© 著作权归作者所有

上一篇: vuex初识
wshining
粉丝 15
博文 75
码字总数 52827
作品 0
深圳
前端工程师
私信 提问
加载中
此博客有 9 条评论,请先登录后再查看。
一本让你醍醐灌顶的小册:《Vue.js组件精讲》

三年前,我开始接触 Vue.js 框架,当时就被它的轻量、组件化和友好的 API 所吸引。与此同时,我也开源了 iView 项目。三年的磨(cǎi )砺(kēng),沉淀了不少关于 Vue.js 组件的经验,于是乎,...

Aresn
2018/12/20
0
0
2019 前端面试 | Vue.js 专题

前端一万小时” 所有,欢迎转载! 转载请注明出处,未经同意,不可修改文章内容。复制代码 🚀本文为“语雀”私有库「前端一万小时」现有文章目录及对应面试题索引, 含未公开发布和写作中的...

itsOli
2019/06/15
0
0
为什么选择MpVue进行小程序的开发

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程...

狗尾草的博客
2018/08/01
0
0
在webpack中配置.vue组件页面的解析

运行将vue安装为运行依赖; 2. 运行将解析转换vue的包安装为开发依赖; 3. 运行将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式; 4. 在中,添加如下规则: module: { rules: [...

osc_69u3sqmc
2019/08/26
0
0
vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境、跨域问题

[TOC] 一、VUE项目的搭建 步骤: 1. 环境搭建 共有3步 2. 项目的创建和启动 注意:创建vue项目,用终端来的命令式创建最合适,不要用编辑器来创建 第二步配置截图 图一: 图二: 图三: 图四...

osc_v0vk38s3
2019/12/20
13
0

没有更多内容

加载失败,请刷新页面

加载更多

Springboot Actuator

Springboot Actuator 1. 启用springboot actuator <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency>dep......

AngerWind
40分钟前
18
0
OSChina 周日乱弹 —— 一个幼小的猕猴桃等待食物转身

1@ 辽元 起床以后, 突然发现时间已经10点啦! 不会晚了吧? 忽然想起来今天是周末, 13 “梦见自己变成猫后,一下子惊醒了,不对是笑醒了。” @冰峰雪座 觉得昨晚的睡眠质量实在不是很好, ...

小小编辑
42分钟前
25
0
【第一行代码--Android】Kotlin入门教程精简版

Google在2017年的I/O大会上宣布Kotlin正式成为Android的以及开发语言,Android Studio也对Kotlin提供了全面支持。 怎样运行kotlin的代码?通过https://try.kotlinlang.org 或者 IDEA 以及 其...

Drop_Table_User
49分钟前
11
0
解决Cannot download "https://github.com/sass/node-sass/releases/download/binding.nod的问题

输入命令解决即可 npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

千年典韦
54分钟前
10
0
测试jar 是否完整有错

cd WEB-INF/lib/for j in *.jar; do echo $j; jar tvf $j > /dev/null ; echo $j done; done

xiaodong16
58分钟前
32
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部