<div id="app">
<parent-comp1></parent-comp1>
<parent-comp1></parent-comp1>
</div>
Vue.component('child-comp1', {
template: `
<button @click="send">发送</button>
`,
data(){
return {
child_comp1: 'hello world!'
}
},
methods: {
send(){
this.$emit('child_comp1_send', this.child_comp1);
}
}
});
Vue.component('parent-comp1', {
template: `
<div>
<child-comp1 @child_comp1_send="get"></child-comp1>
<p>{{parent_comp1}}</p>
</div>
`,
data(){
return {
parent_comp1: ''
}
},
methods: {
get(data){
this.parent_comp1 = data;
}
}
});
new Vue({
el: '#app'
})

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

  1. Vue中利用$emit实现子组件向父组件通信

    Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...

  2. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  3. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  4. Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)

    Vue组件通讯   Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...

  5. Vue中组件化编码使用(实战练习一)

    Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...

  6. Vue中组件

    0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...

  7. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. vue通信之子父组件通信

    子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...

  9. vue中组件通信

    组件的通信 1. 父子组件通信 案例:   //父子组件通信思路 // 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定 // 2 子组件用props 接受自定义的那个:号属性 Vue.co ...

随机推荐

  1. UIDatePicker封装

    #import <UIKit/UIKit.h> #import <objc/runtime.h> @protocol datePickerViewDelegate <NS ...

  2. cmd项目目录结构以及配置文件的升级编写

    一.项目的目录结构: bin:执行文件夹 config:自定义配置文件 lib:公共的模块或者类文件 src:核心业务逻辑代码 二.配置文件的编写 1)config代码如下 from lib.conf ...

  3. CMB面试

    笔试: 1.登录验证userid password后台sql传入,有什么问题,预防措施? https://bbs.csdn.net/topics/120075716 2.cookie,session, ...

  4. Ubuntu16.04源的问题

    今天执行下列语句 sudo apt-get update报错 安装redis时 sudo apt-get install redis-server报错 报错内容大致如下: 在网上查了一下是源的问题,我 ...

  5. OGeek CTR预估

    特征工程:将所有数据拼接到一起做特征,等到处理完,再按索引拆分数据 1.数据分析 查看标签分布:发现valid与testa.testb的分布相似,说明valid与testa的查询时间比较接近,作为验证 ...

  6. php curl POST multipart/form-data与application/x-www-form-urlencode的区别

    背景 CURL在 a.php 中以 POST方式向 b.php 提交数据,但b.php无法接收到数据,而 CURL 操作显示成功. 原来,"传递一个数组到CURLOPT_POSTFIELDS ...

  7. web.config或App.config中AttachDBFilenamex相对路径问题

    <add name="employeeManagerConnectionString" connectionString="Data Source=.\SQLExp ...

  8. shell基础:预定义变量

    比如&& ||用的就是$?,用于计算机的识别

  9. 递归n!

    package sushudigui; import java.util.Scanner; public class digui { public static void main(String[] ...

  10. tfs分支操作

    1.在代码管理器中找到代码项 右击——分支与合并——分支——默认所有选项——确定. 2.可能刚打出的分支为红色,签入,修改代码,待测试后代码合并到主干中(下拉选出他的上级,一般为主干),删除分支. 3 ...