<!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. 【译】x86程序员手册32-9.4 中断描述符表

    9.4 Interrupt Descriptor Table 中断描述符表 The interrupt descriptor table (IDT) associates each interrupt ...

  2. Proc datasets

    作用:控制数据集.Datasets 过程运行结果不输出,结果只有在日志里才能看到. 基本语法: proc datasets lib=work; quit; 用法: 1. 更改数据集 proc data ...

  3. iOS Cell异步图片加载优化，缓存机制详解

    最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载, ...

  4. POJ数据的输入输出格式

    POJ在评阅习题时需要向程序提供输入数据,并获取程序的输出结果.因此提交的程序需按照每个习题具体的输入输出格式要求处理输入输出.有的时候,测评系统给出程序的评判结果是“数据错误”或“结果错误”,有可能 ...

  5. TX-LCN事务控制原理

    TX-LCN由两大模块组成, TxClient.TxManager,TxClient作为模块的依赖框架,提供TX-LCN的标准支持,TxManager作为分布式事务的控制方.事务发起方或者参与方都由T ...

  6. 【传智播客】Libevent学习笔记(一)：简介和安装

    目录 00. 目录 01. libevent简介 02. Libevent的好处 03. Libevent的安装和测试 04. Libevent成功案例 00. 目录 @ 01. libevent简介 ...

  7. 尝试用React写几个通用组件 - 带搜索功能的下拉列表，开关切换按钮，弹出框

    尝试用React写几个通用组件 - 带搜索功能的下拉列表,开关切换按钮,弹出框 近期正在逐步摸索学习React的用法,尝试着写几个通用型的组件,整体项目还是根据webpack+react+css-me ...

  8. vue props传值方法

    <template> <div class="hello"> <ul> <li v-for="(item, index) in ...

  9. Java核心技术卷1 第三章

    1. Java区分大小写,下一段源代码中,关键字public称为访问修饰符,用于控制程序的其他部分对于这段代码的访问级别,关键字class表明Java程序中的全部内容都包含在类里面. 标准的类名命名规 ...

  10. 基于Docker Compose搭建mysql主从复制(1主2从)

    系统环境 * 3 Ubuntu 16.04 mysql 8.0.12 docker 18.06.1-ce docker-compose 1.23.0-rc3 *3 ==> PS  ###我用的是 ...