个人小总结：1年多没有写博客，感觉很多知识点生疏了，虽然工作上能解决问题，但是当别人问到某个知识点的时候，还是迷迷糊糊的，所以坚持写博客是硬道理的，因为大脑不可能把所有的知识点记住，有可能某一天忘了，但是我们工作上还是会使用，只是理论忘了，所以写博客的好处是可以把之前的东西重新看一遍后会在大脑里面重新浮现起来，特别在面试的时候，别人问你的知识点的时候答不上来那种尴尬，但是平时经常使用到，只是说不出所以来的，因此写博客是最好的思路。

阅读目录

Vue2--父子组件的访问

父组件访问子组件，子组件访问父组件，或者子组件访问根组件，Vue.js 都提供了相对应的API。
1. 父组件访问子组件，使用 $children 或 $refs
2. 子组件访问父组件；使用 $parent
如下代码定义了 父组件<parent-component>，父组件模板定义了2个子组件；在父组件中，通过 this.$children 可以访问子组件。
this.$children 是一个数组，它包含所有子组件的实列；如下代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.     <head>
  5.       <title>演示Vue</title>
  6.     </head>
  7.     <div id='app'>
  8.       <parent-component></parent-component>
  9.     </div>
  10.     <template id="child-component1">
  11.       <p>{{ msg }}</p>
  12.     </template>
  13.     <template id="child-component2">
  14.       <p>{{ msg }}</p>
  15.     </template>
  16.   </body>
  17.   <script src="./vue.js"></script>
  18.   <script type="text/javascript">
  19.     Vue.component('parent-component', {
  20.       template: '<div><child-component1></child-component1><child-component2></child-component2><button @click="showmsg">显示子组件的数据</button></div>',
  21.       components: {
  22.         'child-component1': {
  23.           template: '#child-component1',
  24.           data: function() {
  25.             return {
  26.               msg: '这是子组件1'
  27.             }
  28.           }
  29.         },
  30.         'child-component2': {
  31.           template: '#child-component2',
  32.           data: function() {
  33.             return {
  34.               msg: '这是子组件2'
  35.             }
  36.           }
  37.         }
  38.       },
  39.       methods: {
  40.         showmsg: function() {
  41.           for (var i = 0; i < this.$children.length; i++) {
  42.             alert(this.$children[i].msg);
  43.           }
  44.         }
  45.       }
  46.     });
  47.     new Vue({
  48.       el: '#app'
  49.     })
  50.   </script>
  51. </html>

查看效果

理解$refs
在子组件上使用 ref指令，可以给子组件指定一个索引ID，如下代码：

  1. <child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2>

在父组件中，则通过$refs.索引ID访问子组件的实例：

  1. showmsg: function() {
  2.   alert(this.$refs.A1.msg);
  3.   alert(this.$refs.A2.msg);
  4. }

所有的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.     <head>
  5.       <title>演示Vue</title>
  6.     </head>
  7.     <div id='app'>
  8.       <parent-component></parent-component>
  9.     </div>
  10.     <template id="child-component1">
  11.       <p>{{ msg }}</p>
  12.     </template>
  13.     <template id="child-component2">
  14.       <p>{{ msg }}</p>
  15.     </template>
  16.   </body>
  17.   <script src="./vue.js"></script>
  18.   <script type="text/javascript">
  19.     Vue.component('parent-component', {
  20.       template: '<div><child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2><button @click="showmsg">显示子组件的数据</button></div>',
  21.       components: {
  22.         'child-component1': {
  23.           template: '#child-component1',
  24.           data: function() {
  25.             return {
  26.               msg: '这是子组件1'
  27.             }
  28.           }
  29.         },
  30.         'child-component2': {
  31.           template: '#child-component2',
  32.           data: function() {
  33.             return {
  34.               msg: '这是子组件2'
  35.             }
  36.           }
  37.         }
  38.       },
  39.       methods: {
  40.         showmsg: function() {
  41.           alert(this.$refs.A1.msg);
  42.           alert(this.$refs.A2.msg);
  43.         }
  44.       }
  45.     });
  46.     new Vue({
  47.       el: '#app'
  48.     })
  49.   </script>
  50. </html>

查看效果

理解$parent
下面有一个子组件 child-component 和一个父组件 parent-component, 在子组件中，通过 this.$parent 可以访问到父组件的实例；如下代码：

  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.     <head>
  5.       <title>演示Vue</title>
  6.     </head>
  7.     <div id='app'>
  8.       <parent-component></parent-component>
  9.     </div>
  10.     <template id="child-component">
  11.       <div>
  12.         <p>111111</p>
  13.         <button @click="showmsg">显示父组件的实例</button>
  14.       </div>
  15.     </template>
  16.   </body>
  17.   <script src="./vue.js"></script>
  18.   <script type="text/javascript">
  19.     Vue.component('parent-component', {
  20.       template: '<div><child-component></child-component></div>',
  21.       components: {
  22.         'child-component': {
  23.           template: '#child-component',
  24.           methods: {
  25.             showmsg: function() {
  26.               alert(this.$parent.msg);
  27.             }
  28.           }
  29.         }
  30.       },
  31.       data: function() {
  32.         return {
  33.           msg: 'parent component msg'
  34.         }
  35.       }
  36.     });
  37.     new Vue({
  38.       el: '#app'
  39.     })
  40.   </script>
  41. </html>

查看效果

Vue2---父子组件之间的访问的更多相关文章

  1. Vue2.0父子组件之间和兄弟组件之间的数据交互

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...

  2. Vue2.0父子组件之间的双向数据绑定问题解决方案

    对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...

  3. Vue.js 父子组件之间通信的方式

    Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...

  4. Vue(基础四)_总结五种父子组件之间的通信方式

    一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit()  (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...

  5. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  6. vue之父子组件之间的通信方式

    (一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...

  7. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  8. React 学习(六) ---- 父子组件之间的通信

    当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...

  9. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  10. vuejs组件交互 - 01 - 父子组件之间的数据交互

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...

随机推荐

  1. 【Java每日一题】20161205

    package Dec2016; import java.util.HashSet; public class Ques1205 { public static void main(String[] ...

  2. Ajax提交用FormData()上传文件

    1.form声明如下 2.ajax设置如下 var formData = new FormData(document.getElementById("form")); $.ajax ...

  3. webpack4 系列教程(一): 打包JS

    webpack 本身就是为了打包js所设计,作为第一节,介绍怎么打包js. 1. 检验webpack规范支持 webpack支持es6, CommonJS, AMD. 创建vendor文件夹,其中mi ...

  4. springMVC 拦截器源码解析

    前言:这两天学习了代理模式,自然想到了 springmvc 的 aop 使用的就是动态代理,拦截器使用的就是 jdk 的动态代理.今天看了看源码,记录一下.转载请注明出处:https://www.cn ...

  5. Java集合框架——jdk 1.8 ArrayList 源码解析

    前言:作为菜鸟,需要经常回头巩固一下基础知识,今天看看 jdk 1.8 的源码,这里记录 ArrayList 的实现. 一.简介 ArrayList 是有序的集合: 底层采用数组实现对数据的增删查改: ...

  6. c++中的this指针和c#中的this引用

    先总结一下: 在c++中this为指针,使用"->"操作符来获取当前实例中的成员 在c#中this为引用,使用"."操作符来获取当前实例中的成员 下面内容 ...

  7. BZOJ2705: [SDOI2012]Longge的问题(欧拉函数)

    题意 题目链接 Sol 开始用反演推发现不会求\(\mu(k)\)慌的一批 退了两步发现只要求个欧拉函数就行了 \(ans = \sum_{d | n} d \phi(\frac{n}{d})\) 理 ...

  8. PHP会话(Session)实现用户登陆功能 转自#落人间#

    对比起 Cookie,Session 是存储在服务器端的会话,相对安全,并且不像 Cookie 那样有存储长度限制,本文简单介绍 Session 的使用. 由于 Session 是以文本文件形式存储在 ...

  9. 语义分割的简单指南 A Simple Guide to Semantic Segmentation

    语义分割是将标签分配给图像中的每个像素的过程.这与分类形成鲜明对比,其中单个标签被分配给整个图片.语义分段将同一类的多个对象视为单个实体.另一方面,实例分段将同一类的多个对象视为不同的单个对象(或实例 ...

  10. 接口自动化 基于python+Testlink+Jenkins实现的接口自动化测试框架[V2.0改进版]

    基于python+Testlink+Jenkins实现的接口自动化测试框架[V2.0改进版]   by:授客 QQ:1033553122 由于篇幅问题,,暂且采用网盘分享的形式: 下载地址: [授客] ...