vue中组件通信之子父通信
<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中组件通信之子父通信的更多相关文章
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- vue中组件之间的通信
一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式 props vue自定义的事件 消息订阅与发布 vuex sl ...
- Vue中组件间通信的方式
Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...
- Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
Vue组件通讯 Vue最常用的组件通讯有三种:父->子组件通讯.子->父组件通讯,兄弟组件通讯.(template用的pug模板语法) 1.父->子组件通讯 父->子组件通 ...
- Vue中组件化编码使用(实战练习一)
Vue中组件化编码的大致流程(初接触).组件之间的参数传递(最基础的形式).组件之间的配合完成一个需求 1.在Vue中进行组件化编码 1.1.组件化编码流程: (1).拆分静态组件:组件要按照功能点拆 ...
- Vue中组件
0828自我总结 Vue中组件 一.组件的构成 组件:由 template + css + js 三部分组成(.vue文件) 1)组件具有复用性 2) 复用组件时,数据要隔离 3) 复用组件时,方法不 ...
- vue.js 创建组件 子父通信 父子通信 非父子通信
1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue通信之子父组件通信
子父组件通信: 创建一个父组件 Home , 创建一个子组件 Head Home 组件: import Head from "./Head.vue" // 引入 Head 组件 c ...
- vue中组件通信
组件的通信 1. 父子组件通信 案例: //父子组件通信思路 // 1 将父组件的数据传给子组件 在子组件上自定义单项数据绑定 // 2 子组件用props 接受自定义的那个:号属性 Vue.co ...
随机推荐
- rm:删除目录和文件
[root@linux-node- sss]# rm soft.txt //删除文件 rm: remove regular empty file ‘soft.txt’? y [root@linux-n ...
- SQL SERVER 2016研究五
SQL SERVER 2016 Row Level Security 以前:SQL server 的安全模型只能针对于它的表和列, 如果要针对于行,就需要创建存储过程或者函数来处理. 如何设置这个行级 ...
- pt-table-checksum 使用实践
在另外部署的机器上执行: pt-table-checksum h='192.168.122.47',u='root',p='cc.123',P=3306 -d cat --nocheck-r ...
- Python创建目录
需要包含os模块进来,使用相关函数即可实现目录的创建 1.创建目录要用到的函数: (1)os.path.exists(path) 判断一个目录是否存在 (2)os.makedirs(path) 多层创 ...
- Http服务基础原理
http服务相关解释 http : Hyper Text Transfer Protocol, 80/tcp 超文本传输协议,基于tcp传输协议的80端口传输 html: Hyper Text M ...
- 20165236 2017-2018-2 《Java程序设计》第九周学习总结
20165236 2017-2018-2 <Java程序设计>第九周学习总结 一.第十三章教材内容总结 1.URL类 URL类是java.net包中的一个重要的类,使用URL创建对象的应用 ...
- [js]js的表单验证onsubmit方法
http://uule.iteye.com/blog/2183622 表单验证类 <form class="form" method="post" id= ...
- background-size的兼容性
做响应式布局的时候,如果有背景图,我们当然希望他能够全屏100%显示,这样显得页面非常的爆满,不过这又出现了一个问题,图片的尺寸多大合适呢,现在的浏览器分辨率参差不齐,对于Firefox等高级的浏览器 ...
- Wix制作安装包
Wix制作安装包,找起资料来很费劲,记录一下: Product.wxs,该文件只能制作出msi形式的安装包,不能做到自动检测framework. <?xml version="1.0& ...
- Hybrid设计--H5和Native,收口
Native提供容器,不要涉及太多的业务,否则就失去了通用性. H5和Native的差异是短时间内解决不了的,React Native 超越Hydrid跨平台解决方案. 前端和 Native约定了一个 ...