组件
先看程序
<!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实例,因此具有自己的data
,methods
,以及钩子函数等,但没有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]
触发当前实例上的事件。附加参数都会传给监听器回调。