在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据

一、父组件利用props往子组件传输数据

父组件:

<div>
<child v-bind:my-message="parentMsg"></child>//注意传递参数时要用—代替驼峰命名,HTML不区分大小写
</div>

子组件:

Vue.component('child', {
// camelCase in JavaScript
props:{myMessage},
template: '<span>{{ myMessage }}</span>'
})

如上所示,父组件在模板中引用子组件,通过v-bind传递参数myMessage,值为parentMsg,其可以为父组件中的动态属性,同时不用v-bind直接myMessage="hello传递静态值给子组件,则传递的值就是hello字符串。在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign({},myMessage)(在computed中定义),这样子组件的改动将不会影响到父组件。

二、子组件向父组件传递参数利用事件机制

子组件通过this.$emit()派发事件,父组件利用v-on对事件进行监听,实现参数的传递

子组件:

   this.$emit('changeCart',event.target)/*向父组件派发事件,同时传递参数event.target,后面的参数的个数不限*/

父组件:

<v-cartcontrol :food="food" v-on:changeCart="changeCart"></v-cartcontrol>

同时当有组件嵌套时则需要利用该机制一层一层的触发到指定层,不然直接在顶层监听子组件的子组件的事件是监听不到的,需要先向父组件派发,父组件在向上层触发

三、利用ref属性可以获取到dom元素或者是子组件,从而可以调用子组件的方法(注意2.0版本用ref取代了el)

1、当ref直接定义在dom元素上时,则通过this.$refs.name可以获取到dom对dom进行原生的操作

<div class="foods-wrapper" ref="foods-wrapper">

通过this.$refs获取到dom进行操作(注意ref属性的命名不能用驼峰,同时获取的时候也是)

  let menuList=this.$refs['menu-wrapper'].getElementsByClassName('menu-list-hook');//此处如果用this.$refs["menuWrapper"]将获取不到元素

2、通过在引用的子组件上使用ref属性实现父组件调用子组件的方法以及属性

在父组件中引用子组件并定义ref

<v-food  ref="selectfood"></v-food>

调用定义在子组件中的方法show

 this.$refs.selectfood.show();//同时也可以调用子组件中的属性

声明下上面说的是vue 2.0的

vue组件之间的通信以及如何在父组件中调用子组件的方法和属性的更多相关文章

  1. vue 父组件中调用子组件函数

    2019/06/06 在父组件中调用子组件的方法:  1.给子组件定义一个ref属性.eg:ref="childItem"  2.在子组件的methods中声明一个函数.eg: u ...

  2. React Hooks中父组件中调用子组件方法

    React Hooks中父组件中调用子组件方法 使用到的hooks-- useImperativeHandle,useRef /* child子组件 */ // https://reactjs.org ...

  3. vue父组件中调用子组件的方法

    Vue项目中如何在父组件中直接调用子组件的方法: 方案一:通过ref直接调用子组件的方法: //父组件中 <template> <div> <Button @click= ...

  4. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  5. vue中父组件调用子组件的方法

    原文地址 文章目录 什么是组件? 使用组件 组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自 ...

  6. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  7. 父组件调用子组件中的方法- this.$refs.xxx.子组件方法();

    子组件中有一个说的方法 在父组件中去调用当你点击的时候 去调用子组件中的方法 fu.vue 在父组件的方法中调用子组件的方法,很重要 this.$refs.mychild.parentHandlecl ...

  8. Angular组件——父组件调用子组件方法

    viewChild装饰器. 父组件的模版和控制器里调用子组件的API. 1.创建一个子组件child1里面只有一个greeting方法供父组件调用. import { Component, OnIni ...

  9. Angular 4 父组件调用子组件中的方法

    1. 创建工程 ng new demo3 2. 创建子组件 ng g component child 3. 在子组件中定义方法greeting 4. 父组件html(第三行是模板中调用子组件的方法) ...

随机推荐

  1. Android常用adb命令

    1.进入手机命令行模式 adb shell 有多部手机的话 adb -s + 手机编号 + shell 2.安装apk adb install 然后将apk文件拖进命令行 卸载apk adb unin ...

  2. Centos7多网卡绑定操作,通过nmcli命令操作。

    运行 ip link 命令查看系统中可用的接口1.创建bond网卡nmcli con add type team con-name team0 ifname team0 config '{" ...

  3. Apache2.4.23+PHP5.6.30+MySQL5.7.18安装教程

    最近在工作中常常接触到PHP,自己也写过一些简单的PHP页面.我们知道PHP是在服务器端运行的脚本语言,因此我们需要配置服务器环境.之前为了省事直接使用的是wamp集成环境,但是突然某一天领导要求我们 ...

  4. [洛谷P2580]于是他错误的点名开始了

    洛谷P2580的一个水题,用啥都能过,不过为了练习一下刚刚学会的字典树,还是认真做一下吧. #include <cstdio> #include <cstring> using ...

  5. Jquery对raido的一些操作方法

    raido 单选组radio:   $("input[type=radio][checked]").val(); 获  取一组radio被选中项的值 var item = $('i ...

  6. 【R】正态检验与R语言

    正态检验与R语言 1.Kolmogorov–Smirnov test 统计学里, Kolmogorov–Smirnov 检验(亦称:K–S 检验)是用来检验数据是否符合某种分布的一种非参数检验,通过比 ...

  7. Python open()

    Python中对open()函数的说明: Definition : open(name[, mode[, buffering]]) Type : Function of __builtin__ mod ...

  8. EasyUI datagrid默认勾选checkbox时注意事项

    在使用easyui的datagrid默认选中复选框时遇到的一个问题:就是加载程序默认选中复选框时死活选不中,查了好多资料才知道是easyui的datagrid的singleSelect属性设置为‘tr ...

  9. 利用子集构造法实现NFA到DFA的转换

    概述 NFA非有穷自动机,即当前状态识别某个转换条件后到达的后继状态不唯一,这种自动机不便机械实现,而DFA是确定有限状态的自动机,它的状态转换的条件是确定的,且状态数目往往少于NFA,所以DFA能够 ...

  10. scala读取jar包外配置文件的方式

    在scala的开发过程中,经常会修改程序的参数,将这些参数放到配置文件中避免了重复编译,打包的过程 这里给出读取配置文件的三种方式 方式一: 这是最常见的读取配置文件方式 val postgprop ...