Vue学习(三)组件

组件

先看程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<com :parent_msg="msg" @func="getSonData"></com>
			<h2>{{sonData}}</h2>
		</div>
		
		<template id="com">
			<div id="">
				<h3>子组件,父组件向子组件传值为:{{parent_msg}}</h3>
				<input type="button" value="子组件向父组件传值" @click="dataForSon" />
			</div>
		</template>
		
		<script type="text/javascript">
			var com = {
				template:'#com',
				props:['parent_msg'],
				data(){
					return {
						son_msg:'子组件的数据'
					}
				},
				methods:{
					dataForSon(){
						this.$emit('func',this.son_msg)	
					}
				}
			}
			
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'父组件的值',
					sonData:''
				},
				components:{
					com
				},
				methods:{
					getSonData(data){
						this.sonData = data;
					}
				}
			})	
		</script>
	</body>
</html>

组件定义

组件是Vue的一种可复用实例,其名字可以自定义,并且因为组件是一种Vue实例,因此具有自己的datamethods,以及钩子函数等,但没有el选项。

组件的定义有全局组件局部组件之分,其定义方式及使用方式如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>JavaScript声明全局组件时,其要在Vue实例化(new Vue())之前</p>
			<global></global>
			<local></local>
		</div>
		
		<div id="app2">
			<!-- 全局组件在其它Vue实例中也能使用 -->
			<global></global>
			<!-- 局部组件(私有组件)是在特定实例中定义,因此其它组件并不能使用,-->
			<!-- 若在其它实例中使用,控制台会报错  -->
			<local></local>
		</div>
		
		<script type="text/javascript">
			Vue.component('global',{
				template:"<p v-html='msg'></p>",
				data:function(){
					return {
						msg:'全局组件---组件中的<b>data</b>选项必须是一个函数,<b>并且返回的是一个对象</b>'
					}
				}
			})
			
			new Vue({
				el:'#app',
				components:{
					local:{
						template:"<p>局部组件,其数据定义与全局组件无异</p>"
					}
				}
			})
			
			new Vue({
				el:'#app2'
			})
		</script>
	</body>
</html>

组件中父子组件传值

在组件中传值有两种:父组件向子组件传值,子组件向父组件传值。开头的第一个程序实例就实现了父子组件传值的两种方式。因此以开头代码为例:

vue实例的定义:

var vm = new Vue({
	el:'#app',
	data:{
		msg:'父组件的值',
		sonData:''
	},
	components:{
		com
	},
	methods:{
		getSonData(data){
			this.sonData = data;
		}
	}
})	

在上述中定义了vm的Vue实例,其子组件是com,关于com定义如下:

<template id="com">
	<div id="">
		<h3>子组件,父组件向子组件传值为:{{parent_msg}}</h3>
		<input type="button" value="子组件向父组件传值" @click="dataForSon" />
	</div>
</template>
var com = {
	template:'#com',
	props:['parent_msg'],
	data(){
		return {
			son_msg:'子组件的数据'
		}
	},
	methods:{
		dataForSon(){
			this.$emit('func',this.son_msg)	
		}
	}
}
父组件向子组件传值

1. 利用props属性:
vm实例中定义的msg是不可以直接被子组件使用的,因此需要用到到子组件的props属性,并且在父组件进行如下定义:

<div id="app">
	<com :parent_msg="msg" @func="getSonData"></com>
	<h2>{{sonData}}</h2>
</div>

在上述代码中com使用了子组件。:parent_msg="msg"v-bind:parent_msg="msg"的缩写。其中parent_msg是要在子组件定义:props:['parent_msg'],然后在子组件中调用插值表达式:{{parent_msg}} 来使用父组件的数据。(可以看作将父组件的msg数据绑定到子组件中的parent_msg引用上)。

子组件向父组件传值

因为有点复杂,以一个新的代码为例:

<div id="app">
	<cm @fuc="getSonData"></cm>
	<p>{{sonData}}</p>
</div>

<template id="cm">
	<div id="">
		<h1>{{msg}}</h1>
		<button type="button" @click="sendData">向父组件发送数据</button>
	</div>
</template>

<script>
	var cm ={
		template:'#cm',
		data:function(){
			return {
				msg:'我是子组件的数据'
			}
		},
		methods:{
			sendData(){
				this.$emit('fuc',this.msg)
			}
		}
	}
	
	new Vue({
		el:'#app',
		components:{
			cm
		},
		data:{
			sonData:''
		},
		methods:{
			getSonData(data){
				this.sonData = data
			}
		}
	})
</script>

如上代码,可以看作子组件通过点击事件调用sendData函数,该函数的函数体是this.$emit('fuc',this.msg),其中fuc是父组件的函数getSonData(data)绑定的事件,this.msg是父组件函数的参数data
补充:
vm.$emit( eventName, […args] )
参数:
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ava实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),可运行高分资源 Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现
C语言是一种广泛使用的编程语言,它具有高效、灵活、可移植性强等特点,被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构(如if语句、循环语句等)、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中,变量用于存储数据,数据类型用于定义变量的类型和范围。C语言支持多种数据类型,包括基本数据类型(如int、float、char等)和复合数据类型(如结构体、联合等)。 2. 运算符 C语言中常用的运算符包括算术运算符(如+、、、/等)、关系运算符(如==、!=、、=、<、<=等)、逻辑运算符(如&&、||、!等)。此外,还有位运算符(如&、|、^等)和指针运算符(如、等)。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句(如for、while等)和switch语句。通过这些控制结构,可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元,可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型(如int、float等),并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针,可以实现对内存的间接访问和修改。C语言中定义指针使用星号()符号,指向数组、字符串和结构体等数据结构时,还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构,可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型,通常以字符串常量的形式出现,用双引号("...")括起来,末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成,每个成员可以是不同的数据类型;联合由多个变量组成,它们共用同一块内存空间。通过结构体和联合,可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数(如fopen、fclose、fread、fwrite等)实现对文件的读写操作。文件操作函数通常返回文件指针,用于表示打开的文件。通过文件指针,可以进行文件的定位、读写等操作。 总之,C语言是一种功能强大、灵活高效的编程语言,广泛应用于各种领域。掌握C语言的基本语法和数据结构,可以为编程学习和实践打下坚实的基础。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值