<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>parentChildComponent</title>
    <script src="js/vue.js"></script>

    <template id="parent">
      <div>
        I am parent component !{{msg}};I accept :{{msg2}}
        <hr>
        <child ref="child"></child>
      </div>
    </template>

    <template id="child">
      <div>
        I am child component !{{msg}};I accept :{{msg2}}
      </div>
    </template>

  </head>
  <body>
  <script>
    window.onload=function(){
      let child={
        template:'#child',
        data(){
          return {
            msg:'Data of child !',
            msg2:''
          }
        },
        mounted(){
          this.msg2=this.$parent.msg;
        }
      };
      let parent={
        template:'#parent',
        components:{
            child
        },
        data(){
          return {
            msg:'Data of parent !',
            msg2:''
          }
        },
        mounted(){
          this.msg2=this.$refs.child.msg
        }
      };
      new Vue({
        el:'#app',
        components:{
            parent
        }
      });
    }
</script>
    <div id="app">
      <parent></parent>
    </div>
</body>
</html>

    打通父子之间所有数据和方法的共享:
      父模板:<child ref="子名称"></child>
      父访问子: 父组件: this.$refs.子名称.子数据/方法名()
      子访问父: 子组件: this.$parent.子数据/方法名()

Vue.js父子通信之所有方法和数据共享的更多相关文章

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

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

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

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

  3. vue.js父子组件通信动态绑定

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 关于vue.js父子组件数据传递

    vue.js中使用props down,events up的原则进行父子组件间的通信,先来记录下props down,看个例子: <div id="app2"> < ...

  5. Vue.js 父子组件相互传递数据

    父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg"  注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...

  6. Vue.js父子组件如何传值 通俗易懂

    父子组件传值原理图 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建pr ...

  7. Vue devtool插件安装后无法使用,提示“vue.js not detected”的解决方法

    vue devtool下载 极简插件  github vue devtool安装 点击谷歌浏览器箭头所指图标-更多工具-扩展程序   ①:直接将后缀为crx的安装包拖进下图区域即可自动安装     ② ...

  8. vue.js使用更简单的方法制作带删除功能的tooolist

    今天复习了下vue.js,先做了个基本版的todolist,做完后自己想加个删除本项的按钮.一开始做没啥头绪了,试了试无果,查了一把后发现网上的那些方法真的是麻烦,自己动手丰衣足食,自己最后换了思路试 ...

  9. vue.js 源代码学习笔记 ----- 工具方法 option

    /* @flow */ import Vue from '../instance/index' import config from '../config' import { warn } from ...

随机推荐

  1. 面试题6:输入一个链表,按链表值从尾到头的顺序返回一个ArrayList

    题目 输入一个链表,按链表值从尾到头的顺序返回一个ArrayList. 思路 使用栈依次存放输入的链表顺序的值,然后依次出栈便是链表的逆序. 代码 import java.util.ArrayList ...

  2. mysql中判断条件

    if / case when 判断 SELECT CASE 1 WHEN 1 THEN "one" WHEN 2 THEN "two" ELSE "m ...

  3. matlab中数据类型

    在MATLAB中有15种基本数据类型,分别是8种整型数据.单精度浮点型.双精度浮点型.逻辑型.字符串型.单元数组.结构体类型和函数句柄.这15种基本数据类型具体如下. 有符号整数型:int8,int1 ...

  4. HDU_1542_(树状数组)

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  5. ALTER GROUP - 修改一个用户组

    SYNOPSIS ALTER GROUP groupname ADD USER username [, ... ] ALTER GROUP groupname DROP USER username [ ...

  6. zabbix基础安装

    环境依赖:LNMP或者LAMP 简介参考:http://blog.51cto.com/zhang789/1868880 一.准备 我安装的环境及其版本如下: 系统版本 CentOS Linux rel ...

  7. Python应该怎样实现快速入门?

    作为一名Python爱好者,我也想跟大家分享分享我自学Python的一些小经验.搬来你的小板凳,听听看吧.也许,你会很有收获,也许你也走上了自学Python的不归路.开讲啦~ 首先,你要有自信心,要明 ...

  8. JAVA基础——设计模式之简单工厂模式

    在阎宏博士的<JAVA与模式>一书中开头是这样描述简单工厂模式的:简单工厂模式是类的创建模式,又叫做静态工厂方法(Static Factory Method)模式.简单工厂模式是由一个工厂 ...

  9. pytorch: Variable detach 与 detach_

    pytorch 的 Variable 对象中有两个方法,detach和 detach_ 本文主要介绍这两个方法的效果和 能用这两个方法干什么. detach 官方文档中,对这个方法是这么介绍的. 返回 ...

  10. Python 绑定方法与非绑定方法

    用到的: import uuid  --------------  uuid是128位的全局唯一标识符, 通常用32位的一个字符串的形式来表现 uuid.uuid1()  -------------  ...