<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. SVN安装部署

    svn安装版本用的是1.8 SVN属于功能性软件,yum安装即是最佳实践. 安装svn yum install subversion 检查svn是否安装完毕 [root@mysql ~]# rpm - ...

  2. Magento2与Magento1的区别有哪些

    magento2是15年正式上线的正式版,框架和写法跟magento1有很大区别,用到了命名空间和composer,模块化设计更强.因为是刚出生不久 所以bug比较多.目前全世界做magento2的公 ...

  3. SQL Server 安装好后 Always On群组配置

    需要对SQL Server必要的端口打开Windows防火墙的入站规则,比如TCP- 1433端口等. 特别注意:由于AG默认需要用到TCP-5022端口,所以该端口务必保证在Windows防火墙中开 ...

  4. 001-RLE算法

    一.定义 RLE全称(run-length encoding),翻译为游程编码,又译行程长度编码,又称变动长度编码法(run coding),在控制论中对于二值图像而言是一种编码方法,对连续的黑.白像 ...

  5. [硬件]Urg_viewer数据读取

    首先,数据读取部分开启了两个后台线程,一个负责串口的连接和测试:一个负责数据的接收. 几个基本概念: 建立连接和关闭连接. 开始记录和停止记录. 保存CSV文件. 1.查找COM端口,Urg_driv ...

  6. SaltStack 数据系统 Grains Pillar

    grains 先来一个很好用的命令 # salt '*' grains.items \\基本上输出了所有你想要的信息 192.168.100.138: ---------- SSDs: biosrel ...

  7. MongoDB--编译文件

    -j 加你的cpu核数来加速编译过程 编译出错可以自行安装所需依赖. 或者去官网直接下载编译好的二进制,直接执行. 编译好之后查看文件: mongod:mongodb的执行程序,数据库部署也用这个程序 ...

  8. python beautiful soup库的超详细用法

    原文地址https://blog.csdn.net/love666666shen/article/details/77512353 参考文章https://cuiqingcai.com/1319.ht ...

  9. ob

    可以利用ob_get_contens生成静态页面,应用场景 后台生成商品的时候 可以生成对应的前台页面,其他页面直接调用. $result = $goods->create(); if ($re ...

  10. Mysql导出(多张表)表结构及表数据 mysqldump用法

        命令行下具体用法如下:  mysqldump -u用戶名 -p密码 -d 數據库名 表名 脚本名; 1.导出數據库為dbname的表结构(其中用戶名為root,密码為dbpasswd,生成的脚 ...