• [x] 1.prop组件通信

    • 1.简单理解
    • 2.多层嵌套
  • [x] 2.使用ref进行组件通信
  • [x] 3.$emit组件通信

1.prop组件通信

1.简单理解

有点类似于应式的感觉,我不管你要不要只要给你,那么你必须有一个props['teach'] 进行接收

<student teach="数学" ></student>

<teacher>{{teach}}</teacher>
props:['teach']
2.多层嵌套

1.级

<me age="18" name="smartom"></me>

2.级 age 和 name 都是可以改变的值 可以使用v-model?

<myage :value="age" ></age>
<name :value="name" ></name>
props:['name','age']

3.级别

<div>
我的年龄{{value}}
</div>
props:['value']
<div>
我的年龄{{value}}
</div>
props:['value']

2.使用ref进行组件通信

全局

this.$parent //获取父组件

this.$parent.$children //获取子组件

如果子组件有多个怎样区分这些组件?

<component1></component>
<component2></component>
<component3></component>

ref 说白了就是来给子组件定义标识

<component1 ref="ref1"></component>
<component2 ref="ref2"></component>
<component3 ref="ref2"></component>

子组件访问

this.$parent.$refs.ref1.$data
3.自定义事件通父组件传递 $emit $on

父组件定义自定义事件

<component1 @updateParentEvent="sasdf"></component>
data(){
return {
data:[],
}
}
methods:{
sasdf(data){ }
}

子组件

methods:{
onclickevent(){
this.$emit("updateParentEvent",this.data);
}
}

VUE简单组件通信的更多相关文章

  1. Vue 兄弟组件通信(不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  2. Vue兄弟组件通信

    Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...

  3. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  4. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

  5. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  6. vue中组件通信

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

  7. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  8. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  9. vue学习指南:第七篇(详细) - Vue的 组件通信

    Vue 的 父传子 子传父 一.父组件向子组件传值: 父传子 把需要的数据 传递给 子组件,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用  缩写是(:) 1.创建子组件,在src/ ...

随机推荐

  1. 基于CART的回归和分类任务

    CART 是 classification and regression tree 的缩写,即分类与回归树. 博主之前学习的时候有用过决策树来做预测的小例子:机器学习之决策树预测--泰坦尼克号乘客数据 ...

  2. Python之路PythonNet,第三篇,网络3

    pythonnet   网络3 udp 通信 recvfrom sendtofork 多进程并发threading 多线程并发socketserver 系统模块 套接字的属性 setsockopt g ...

  3. MySQL篇,第一章:数据库知识1

    MySQL 数据库 1 一.MySQL概述 1.什么是数据库       数据库是一个存储数据的仓库 2.哪些公司在用数据库       金融机构.购物网站.游戏网站.论坛网站... ... 3.提供 ...

  4. 怎样用CMD命令强行删除文件?

    如果你要删除的整个文件夹以及文件夹里面的所有内容的话rd/s/q 盘符:\某个文件夹   (这样整个文件夹所有的文件和文件夹都删除了)比如我想删除D盘的123文件夹以及123文件夹里面所有的内容rd/ ...

  5. django安装命令

    通过pip安装Django   ==指定版本号 pip install Django==2.0.2 查看djangoshifou安装成功:1.进入python ,2.import   django 查 ...

  6. PTA——简单计算器

    PTA 7-20 简单计算器 #include<stdio.h> int main() { int a,b; char c; scanf("%d",&a); w ...

  7. 《DSP using MATLAB》Problem5.33

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  8. Linux----版本选择

    此文摘自老男孩老师课堂: 下载地址:http://man.linuxde.net/download/

  9. centos7虚拟机安装elasticsearch5.0.x-安装篇

    https://blog.csdn.net/u012371450/article/details/51776505 请预先安装jdk 创建新用户(非root用户)elasticsearch只能用非ro ...

  10. 更改MySQL数据库的编码为utf8mb4

    原文:http://blog.csdn.net/woslx/article/details/49685111 utf-8编码可能2个字节.3个字节.4个字节的字符,但是MySQL的utf8编码只支持3 ...