<!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. 转载:如何使用RFT自动打开IE

    如何在RFT测试脚本中打开IE浏览器?   第一步,配置应用程序进行测试: “配置”菜单 ——> “配置应用程序进行测试...”,进入下面这个界面,默认三个自带的应用程序,点击“添加”加入IE. ...

  2. vue2.0生命周期函数

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

  3. codeforces_B. Forgery

    http://codeforces.com/contest/1059/problem/B 题意: For simplicity, the signature is represented as an  ...

  4. POJ中和质数相关的三个例题(POJ 2262、POJ 2739、POJ 3006)

    质数(prime number)又称素数,有无限个.一个大于1的自然数,除了1和它本身外,不能被其他自然数整除,换句话说就是该数除了1和它本身以外不再有其他的因数:否则称为合数.      最小的质数 ...

  5. css 动态导入css文件 @import 动态js加载 都是静态的

    @import "http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" /*-防止各大cdn公共库加载地址失效 ...

  6. 雷林鹏分享:PHP Secure E-mails

    在上一节中的 PHP e-mail 脚本中,存在着一个漏洞. PHP E-mail 注入 首先,请看上一章中的 PHP 代码: if (isset($_REQUEST['email'])) { // ...

  7. SQLServer锁的概述

    SQLServer锁的概述   锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题: 丢失更新 A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了 ...

  8. pep8摘要

    https://www.python.org/dev/peps/pep-0008/ #!/usr/bin/python # -*- coding:utf- -*- # @filename: pep_s ...

  9. 大项目之网上书城(九)——订单Demo

    目录 大项目之网上书城(九)--订单Demo 主要改动 1.OrderServiceImpl 代码 2.OrderDaoImpl 代码 3.OrderitemDaoImpl 代码 4.orderite ...

  10. PHP 反射API

    出处:http://blog.csdn.net/hguisu/article/details/7357421 PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse ...