<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最常用的组件通讯有三种:父-&gt;子组件通讯、子-&gt;父组件通讯,兄弟组件通讯.(template用的pug模板语法)

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

  4. Vue中组件

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

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

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

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

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

  7. vue中组件通信

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

  8. vue中使用ts后,父组件获取执行子组件方法报错问题

    一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...

  9. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

随机推荐

  1. request对象常用API 获取请求参数的值 request应用 MVC设计模式

    1 request对象常用API   1)表示web浏览器向web服务端的请求   2)url表示访问web应用的完整路径:http://localhost:8080/day06/Demo1     ...

  2. git revert all changes

    点击打开链接https://www.kernel.org/pub/software/scm/git/docs/git-reset.html # Revert changes to modified f ...

  3. mysql--二进制日志(bin-log)三种格式介绍及分析

    一.Mysql binlog日志有三种格式,分别为ROW.Statement以及MiXED.Row LevelBinary Log会记录成[每一行数据被修改的形式],然后在Slave端再对相同的数据进 ...

  4. Linux内核使用浮点运算问题

    上一篇博文中 电池温度检测原理和示例代码 ,由于驱动要使用对数函数而从网上参看一个实现 double ln(double a) { ; int k,nk; double x,xx,y; x = (a- ...

  5. 转://oracle Wallet在expdp/impdp中使用场景

    oracle Wallet的使用(即内部加密技术TDE(Transparent Data Encryption )) 1. TDE是Oracle10gR2中推出的一个新功能,使用时要保证Oracle版 ...

  6. MySQL JDBC简单使用

    首先需要去MySQL官网下载MySQL JDBC驱动 导入jar包 String driver = "com.mysql.jdbc.Driver"; String url = &q ...

  7. 续drone 1.0 新界面调整

    接以前的内容,drone 最新发布的版本又有界面信息的调整了,更方便了. 环境准备 docker-compose 文件 version: '3' services: drone-server: ima ...

  8. dbcp和druid(数据库连接池)

    前言: 对于一个简单的数据库应用,由于对于数据库的访问不是很频繁.这时可以简单地在需要访问数据库时,就新创建一个连接,用完后就关闭它,这样做也不会带来什么明显的性能上的开销.但是对于一个复杂的数据库应 ...

  9. 【项目 &#183; Wonderland】UML设计

    团队作业---UML设计 Part 0 · 简要目录 Part 1 · 团队分工 Part 2 · UML Part 3 · 工具选择 Part 1 · 团队分工 Part 2 · UML 描述信息: ...

  10. python+selenium之自定义封装一个简单的Log类

    python+selenium之自定义封装一个简单的Log类 一. 问题分析: 我们需要封装一个简单的日志类,主要有以下内容: 1. 生成的日志文件格式是 年月日时分秒.log 2. 生成的xxx.l ...