vue 父子组件通信
算是初学vue,整理一下父子组件通信笔记。
父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。
一、父组件向子组件下发数据:
1.在子组件中显式地用props选项声明它预期的数据;
- Vue.component('child', {
- // 声明 props
- props: ['message'],
- // 就像 data 一样,prop 也可以在模板中使用
- // 同样也可以在 vm 实例中通过 this.message 来使用
- template: '<span>{{ message }}</span>'
- })
2.在父组件模板中通过子组件声明的props数据向子组件发数据;
- // 此处通过message向子组件下发消息
<child message="hello!"></child>
二、子组件向父组件发送消息
1.父组件模板中使用 $on(eventName)
监听事件(注:不能用 $on
监听子组件释放的事件,而必须在模板里直接用 v-on
绑定);
2.子组件中使用$emit(eventName, optionalPayload)
触发事件
- <div id="message-event-example" class="demo">
- <p v-for="msg in messages">{{ msg }}</p>
- // 父组件模板中使用子组件,通过v-on监听子组件触发的事件
- <button-message v-on:message="handleMessage"></button-message>
- </div>
- Vue.component('button-message', {
- template: `<div>
- <input type="text" v-model="message" />
- <button v-on:click="handleSendMessage">Send</button>
- </div>`,
- data: function () {
- return {
- message: 'test message'
- }
- },
- methods: {
- handleSendMessage: function () {
- // 使用$emit触发事件,传入载荷数据
- this.$emit('message', { message: this.message })
- }
- }
- })
- new Vue({
- el: '#message-event-example',
- data: {
- messages: []
- },
- methods: {
- handleMessage: function (payload) {
- // 使用载荷数据(payload)
- this.messages.push(payload.message)
- }
- }
- })
注:以上内容来源于Vue.js官方学习教程。初学vue,根据自己的理解整理,如有错误,欢迎交流纠正。
vue 父子组件通信的更多相关文章
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue父子组件通信高级用法
vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...
- vue 父子组件通信详解
这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...
- vue父子组件通信
一.父子组件间通信 vue.js 2.0提供了一个ref 的属性: 可以为子组件指定一个索引id 父组件: <template> <div id='user-login'> & ...
- vue 父子组件通信props/emit
props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...
- beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)
场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容. 首先是父子(本例中是子组件与孙组件)通信,目前是父传到子,暂时还没有子传到 ...
- vue父子组件通信传值
父组件 -> 子组件 通过props来进行通信 父组件代码: <Children :dataName = "dataContent" /> //dataName: ...
- Vue 父子组件通信入门
父组件向子组件传值 1.组件实例定义方式,注意:子组件一定要使用props属性来定义父组件传递过来的数据 <script type="text/javascript"> ...
- vue 父子组件通信-props
父组件:引用了ComBack组件 ComBack组件:引用了BasicInfor组件 先使用props获取父组件的headInfo这个对象,这里注意(default)默认返回值要用工厂形式返回 Bas ...
随机推荐
- 我是如何通过学习拿到年薪80w
本人做了5年Java,如今还是一个码农,天天写业务代码,直到2018年10月中旬遇到一位技术大牛,他给我一套技术思维导图让我又看到了希望!今天分享给各位想要提升.升职.加薪的你. 普通Java程序员与 ...
- Android中的Context(一)
Android中的Context(一) 在Android开发中,Context可以说是我们接触地非常多的一个概念了,也译作"上下文",但是这个上下文到底是什么却并不好理解. 通俗的 ...
- Java实训:实训一 ——长春职业技术学院 16级网络工程
Java实训:实训一 本文会解释一些设计思路. 想看具体过程,请转:https://www.cnblogs.com/lxwlxw/p/10114187.html 笑维的码云项目命名不太对,所以我来:h ...
- 表单传参,在action中的参数得不到
写上面这个的时候,发现传过去的url路径是这样的 在action后面的pro=login得不到. 只需要将method中的get改成post就可以了
- java 的序列化与反序列化
前言: 一直很不理解java的序列化的概念,为什么java对象的序列化要实现 Serializable的接口?或者要实现Externalizable的接口?而且Externalizable 的父类还是 ...
- 安装vue脚手架和vue安装element-ui
首先下载安装node.js,因为vue依赖node.js,然后用npm安装vue,步骤如下: 安装成功后安装element-UI,步骤如下: 完成后用npm run dev 运行项目.
- django之CSRF
在POST请求到达views之前,csrf帮我们进行一层验证 <!DOCTYPE html> <html lang="en"> <head> & ...
- Dangerous well
Firsttime to develop games throuth Unity3d, such a great platform! You can build your games more qui ...
- 丰富的else语句以及简介的with语句
1.if···else略 2.while.for与else Python中的循环语句(无论是while 还是for)中,经常配合continue和break语句,此时,可以和else搭配使用,当循环正 ...
- 一个简单的java程序,用于RabbitMQ日志监控
RabbitMQ的所有日志,都会发给topic类型的exchange “amq.rabbitmq.log” routingKey 有 debug,info,waring,error. 如果接收所有 ...