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 ...
随机推荐
- [Android][Android Studio] Gradle项目中加入JNI生成文件(.so文件)
版权声明:本文作者:Qiujuer https://github.com/qiujuer; 转载请注明出处,盗版必究! ! ! https://blog.csdn.net/qiujuer/articl ...
- SQL存储过程分页
CREATE PROC ZDY_FY(@Pages INT, @pageRow INT) --@Pages第几页 @pageRow每页显示几行 AS BEGIN DECLARE @starNum IN ...
- LigerUi折叠与展开
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- python认知及六大标准数据类型
--- typora-root-url: assets --- ### -python的认知 ``` 89年开发的语言,创始人范罗苏姆(Guido van Rossum),别称:龟叔(Guido). ...
- 多线程——interrupt方法
测试interrupt()方法: package day_12_01_Thread; import java.util.Date; /** * 测试interrupt()方法:结束线程,但是线程还是活 ...
- syslog-ng内容讲解
一.基础syslog-ng作为syslog的替代工具,可以完全替代syslog的服务,并且通过定义规则,实现更好的过滤功能.系统自带版本: 引用 # rpm -qa|grep syslog-ngsys ...
- (转)Fabric 1.0 读写集
本文译自Fabric 1.0 文档,这篇文档详述了当前读写集语义实现的细节.文档地址为: https://hyperledger-fabric.readthedocs.io/en/latest/rea ...
- CentOS7安装Jdk1.8
一.前期准备 a) 首先从官网上下载Jdk 8 for Linux x64到window下. b) 我这边用的最小安装,所以没有安装centos自带的openjdk,如果你安装时,不是最小安装的话,可 ...
- iOS 上传自己的库到cocoapod
最近自己写了个库,传到github上,想让自己的库支持cocoapod,这里我看了很多相关文章.下面我就写下详细步骤以及会遇到的问题. 我们会使用trunk的方式提交到cocoa pod 这是2014 ...
- iOS UI基础-12.0 Storyboard
storyboard创建控制器 1.先加载storyboard文件(Test是storyboard的文件名) UIStoryboard *storyboard = [UIStoryboard stor ...