一、父子组件间通信

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) 回调函数内部做了判断,最后返回符合判断条件的新的数据。

vue父子组件通信的更多相关文章

  1. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  2. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  3. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  4. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  5. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  6. beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

    场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...

  7. vue父子组件通信传值

    父组件 -> 子组件 通过props来进行通信 父组件代码: <Children :dataName = "dataContent" /> //dataName: ...

  8. Vue 父子组件通信入门

    父组件向子组件传值 1.组件实例定义方式,注意:子组件一定要使用props属性来定义父组件传递过来的数据 <script type="text/javascript"> ...

  9. vue 父子组件通信-props

    父组件:引用了ComBack组件 ComBack组件:引用了BasicInfor组件 先使用props获取父组件的headInfo这个对象,这里注意(default)默认返回值要用工厂形式返回 Bas ...

随机推荐

  1. 如何把我的Java程序变成exe文件?

    JAVA是一种“跨平台”的语言,拥有“一次编写,处处运行”的特点,让它成为当今IT行业,必不可少的一门编程语言.每一个软件开发完成之后,应该大家都需要打包程序并发送给客户,常见的方式:java程序打成 ...

  2. NodeJS项目迁移兼Ubuntu下NodeJS环境部署

    前言 之前做的几个项目都托管在阿里云服务器,但是最近要到期了.想着到底要不要续期,毕竟100/月.后面看着阿里云有个活动,800/三年.果断买下.环境部署折腾了一天,其中也遇到几个坑. 目录 一.安装 ...

  3. JS实现添加至购物车功能

    效果图展示: 当将书拖拽至购物车一览时: 首先将页面的基本结构写出来: <!DOCTYPE html> <html lang="en"> <head& ...

  4. 模拟实现C库的atoi、atof和itoa

    1.C函数atoi atoi (表示 alphanumeric to integer)是把字符串转换成整型数的一个函数.广泛的应用在计算机程序和办公软件中.atoi( ) 函数会扫描参数 nptr字符 ...

  5. 2.ssh密钥登陆(ssh无密码登陆)

    1.A主机生成密钥对 ssh-keygen  -t  rsa 2.将A主机的公钥发给B主机 scp  id_rsa.pub  linux2:/cloud                         ...

  6. JavaScript基础知识(一)

    一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...

  7. AI类人工智能产品经理的丛林法则

     AI是大家都很关注的领域,然而对于大部分想要入行的同学来讲,AI的算法技术门槛相对较高,让很多空有热血但是缺少数学背景的同学望而却步.不知道什么时候,可能是“人人都是产品经理”这个论调的影响,产品经 ...

  8. WAS ND V6下配置IHS V6

    记录在同一台机器上进行WebSphere Application Server Network Deployment V6和IBM HTTP Server V6的配置情况. 配置的步骤如下: 一. 在 ...

  9. iOS之网络请求NSURLSession剖析

    2013年的WWDC大会上,苹果推出了NSURLSession,对Foundation URL加载系统进行了彻底的重构,提供了更丰富的API来处理网络请求,如:支持http2.0协议.直接把数据下载到 ...

  10. Flow-Guided Feature Aggregation for Video Object Detection论文笔记

    摘要 目前检测的准确率受物体视频中变化的影响,如运动模糊,镜头失焦等.现有工作是想要在框的级别上寻找时序信息,但这样的方法通常不能端到端训练.我们提出了flow-guided feature aggr ...