vue父子组件通信
一、父子组件间通信
vue.js 2.0提供了一个ref 的属性： 可以为子组件指定一个索引id
父组件：
<template>
<div id='user-login'>
<h2 class='text-center'>用户登录</h2>
<form class='form-horizontal' role='form'>
<user-name ref='uname' placeholder='请输入你的用户名'></user-name>
<user-submit></user-submit>
</form>
</div>
</template>
<style>
#user-login{
margin-top: 50px;
}
</style>
<script>
import username from './loginName.vue'
import usersubmit from './loginSubmit.vue'
export default{
components: {
'user-name': username,
'user-submit': usersubmit
}
}
</script>
子组件一：
<template>
<div>
<div class='form-group'>
<label>用户名</label>
<div>
<input type='text' class='form-control' v-model="username" :placeholder='username'>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['placeholder'],
data: function () {
return {username: '张三'}
}
}
</script>
子组件2：
<template>
<div class="form-group">
<div>
<button type="button" class="btn btn-default" v-on:click="test">提交</button>
</div>
</div>
</template>
<script>
export default{
data () {
},
methods: {
test () {
alert(this.$parent.$refs.uname.$data.username)
}
}
}
</script>
二、父子之间通信之自定义事件
父组件：
<template>
<div id='user-login'>
<h2 class='text-center'>用户登录</h2>
<form class='form-horizontal' role='form'>
<user-name placeholder='请输入你的用户名' @updateUserName="setUserName"></user-name>
<user-submit></user-submit>
</form>
</div>
</template>
<style>
#user-login{
margin-top: 50px;
}
</style>
<script>
import username from './loginName.vue'
import usersubmit from './loginSubmit.vue'
export default{
components: {
'user-name': username,
'user-submit': usersubmit
},
data () {
return {
username: ''
}
},
methods: {
setUserName (uname) {
this.username = uname
}
}
}
</script>
子组件1：
<template>
<div>
<div class='form-group'>
<label>用户名</label>
<div>
<input type='text' class='form-control' v-model='username' :placeholder='username' @change='userNameChange'>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['placeholder'],
data: function () {
return {
username: '张三'
}
},
methods: {
userNameChange () {
// 调用父组件的方法
this.$emit('updateUserName', this.username)
}
}
}
</script>
子组件2：
<template>
<div class="form-group">
<div>
<button type="button" class="btn btn-default" v-on:click="test">提交</button>
</div>
</div>
</template>
<script>
export default{
data () {
return {
}
},
methods: {
test () {
alert(this.$parent.$data.username)
}
}
}
</script>
三、子组件何时被挂载到父组件上的？动态绑定组件
在mounted时
父组件：
<template>
<div id='user-login'>
<h2 class='text-center'>用户登录</h2>
<form class='form-horizontal' role='form'>
<user-name placeholder='请输入你的用户名' @updateUserName='setUserName'></user-name>
<user-area></user-area>
<user-submit></user-submit>
</form>
</div>
</template>
<style>
#user-login{
margin-top: 50px;
}
</style>
<script>
import username from './loginName.vue'
import usersubmit from './loginSubmit.vue'
import userArea from './loginArea.vue'
export default{
components: {
'user-name': username,
'user-submit': usersubmit,
'user-area': userArea
},
data () {
return {
username: ''
}
},
mounted () {
// alert(this.$children.length) // 结果为4,说明子组件到这里已经挂载上了
this.$children.forEach(function (cc) {
cc.$on('childChange', this.setValue)
}.bind(this))
},
methods: {
setUserName (uname) {
this.username = uname
},
setValue (key, value) {
this.$data[key] = value
alert(this.$data[key])
}
}
}
</script>
子组件1：
<template>
<div>
<div class='form-group'>
<label>用户名</label>
<div>
<input type='text' class='form-control' v-model='username' :placeholder='username' @change='userNameChange'>
</div>
</div>
</div>
</template>
<script>
export default{
props: ['placeholder'],
data: function () {
return {
username: '张三'
}
},
methods: {
userNameChange () {
// 调用父组件的方法
this.$emit('updateUserName', this.username)
}
}
}
</script>
子组件2：
<template>
<div class='form-group'>
<label class='col-sm-2'>地区</label>
<div class='col-sm-10'>
<select v-model='selectedIndex' class='form-group' v-on:change='seletecChange'>
<option v-for='a in areas' v-bind:value='a.id'>{{a.text}}</option>
</select>
</div>
</div>
</template>
<script>
export default{
data () {
return {
selectedIndex: 0,
areas: [
{'id': 0, 'text': '--请选择--'},
{'id': 1, 'text': '北京'},
{'id': 2, 'text': '上海'}
]
}
},
methods: {
seletecChange () {
this.$emit('childChange', 'userarea', this.selectedIndex)
}
}
}
</script>
子组件3：
<template>
<div class="form-group">
<div>
<button type="button" class="btn btn-default" v-on:click="test">提交</button>
</div>
</div>
</template>
<script>
export default{
data () {
return {
}
},
methods: {
test () {
alert(this.$parent.$data.username)
}
}
}
</script>
四、搜索框功能
<template>
<div class='form-group'>
<label class='col-sm-2 control-label'>爱好</label>
<div class='col-sm-10'>
<input type='text' class='form-control' v-model='inputText'>
<br>
<table class='table table-bordered' v-if='showTable()'>
<thead>
<th>类别1</th>
<th>类别2</th>
</thead>
<tbody>
<tr v-for='f in favs'>
<td>{{f.class1}}</td>
<td>{{f.class2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default{
data () {
return {
inputText: '',
favs: [
{'class1': '前端开发', 'class2': 'js'},
{'class1': '后端开发', 'class2': 'java'}
]
}
},
methods: {
showTable () {
if (this.inputText === '') return false
return true
}
},
computed: {
getFavs () {
return this.favs.filter(function (value) {
if (value.class2.indexOf(this.inputText) >= 0) {
return true
} else {
return false
}
}.bind(this))
}
}
}
</script>getFavs方法返回一个新的数组，array.filter(callback)回调函数内部做了判断，最后返回符合判断条件的新的数据。
