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 ...
随机推荐
- finecms如何批量替换文章中的关键词?
Finecms批量替换文章关键词要怎么操作呢,比如把关键词A换为B?Finecms是免费开源无商业限制的内容管理系统,个人在维护,但二次开发很灵活,我们可以通过开发插件或数据库sql语句来操作,下面就 ...
- 初学git
初学git,总结了一点东西,可能有理解和操作的不到位的地方,还有就是这个是我之前写在word上的,因为CSDN上不能直接上传,所以拷贝的过程中也可能有其他问题.发的的朋友还望指正... 1.找到“参与 ...
- 【BP算法】
一.符号定义: al: 第l层的输出值(经过了激活函数).在DNN中是向量,在CNN中是张量. σ:激活函数的表达形式. zl: 第l层的输出值(未经过激活函数).在DNN中是向量,在CNN中是张量 ...
- 设置td中的table置顶
style="vertical-align: top" <td colspan="11" rowspan="5" style=&quo ...
- python的mutable变量与immutable变量
python的变量分为mutable(可变的)和immutable类型. mutable:dict, list immutable:int , string , float ,tuple..
- vue.js 兄弟组件传值
另: 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了,虽然可以使用事件监听的方式,但还是不如vuex专业.比如A组件要告 ...
- content_type
1.作用 将app名称与其中表关系进行保存 在models创建表时,关联到ContentType并不会产生实际的字段 2.使用 在models中代码 from django.db import mod ...
- 根据构建类型动态设置AndroidManifest.xml文件中的meta-data
当debug和release版本使用不同的值时,使用Gradle设置相应的值. Android主配置文件 <meta-data android:name="com.amap.api.v ...
- 10.110.20.16上的MQTT server
apollo 10.110.20.16 root XnlzeNP2 /var/lib/apache-apollo-1.7.1 1 创建broker 进入 bin 创建 broker ...
- 分词、词性标注POS等学习【转载】
转自:https://cloud.tencent.com/developer/article/1091815 1. 分词(Word Cut) 英文:单词组成句子,单词之间由空格隔开 中文:字.词.句. ...