<!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. Mysql——Innodb和Myisam概念与数据恢复

    Innodb和Myisam是Mysql常见的两种数据存储引擎.没有研究过Oracle.SQL Server等数据库,所以下面只针对Mysql. 一.两种方式的数据存储结构: 在Myisam下,数据库的 ...

  2. Tinking in Java ---Java的NIO和对象序列化

    前面一篇博客的IO被称为经典IO,因为他们大多数都是从Java1.0开始就有了的:然后今天这篇博客是关于NIO的,所以的NIO其实就是JDK从1.4开始,Java提供的一系列改进的输入/输出处理的新功 ...

  3. Mysql:is not allowed to connect to this MySQL server [转]

    原文链接http://www.blogjava.net/acooly/archive/2008/09/17/229368.html 如果你想连接你的mysql的时候发生这个错误:ERROR 1130: ...

  4. iOS UI 顶级布局

    状态栏. 导航栏. tabbar. uiviewcontroller视图区域.

  5. chfn - 改变你的finger讯息

    总览 SYNOPSIS chfn [ -f full-name ] [ -o office ] [ -p office-phone ] [ -h home-phone ] [ -u ] [ -v ] ...

  6. PHP 之pthreads多线程模块在windows下的安装

    一.查看phpinfo 二.下载pthreads扩展 下载地址:http://windows.php.net/downloads/pecl/releases/pthreads/ 三.复制文件 复制ph ...

  7. Entity Framework 6.x介绍

    一.简介 Entity Framework是一个ORM框架,可以在SQL Server,Oracle,DB2,MySQL等数据库上使用.其发展到现在已经到6.x版本了,同时该版本也是被官方所推荐使用. ...

  8. javascript——js string 转 int 注意的问题——parseInt(转)

    <script>     var   str='1250' ;  alert( Number(str) );  //得到1250 alert(parseInt(str));  //得到12 ...

  9. 查找BUG的方法

    1)测试环境 1)代码调试 2)问题重现 3)思考问题所在 2)生产环境 1)思考 2)测试本地环境是否存在问题 3)打开日志查看 4)思考是否是数据原因 5)拷贝数据到本地进行重现 3)未知错误 1 ...

  10. CentOS中一些基本的操作记录

    1)切换到root su root 输入你的密码.我的是123