<!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. 使用Xamarin.Forms跨平台开发入门 Hello,Xamarin.Forms 第一部分 快速入门

    本文介绍了如何使用VisualStudio开发Xamarin.Forms 应用程序和使用Xamarin.Forms开发应用的基础知识,包括了构建和发布Xamarin.Forms应用的工具,概念和步骤. ...

  2. vue2.0生命周期函数

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

  3. rem手机端页面自适应布局（待修正下一篇完美布局）

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

  4. .Net Core 真能令微软的.Net 跨平台“蔓延”？

    什么是.Net .Net 本身就是基于公共语言基础架构(CLI)实现的平台独立的公共语言开发平台,只是自2006年成为规范以来的CLI,只有Windows自己支持罢了(mono除外).微软的.Net ...

  5. 扩展IHttpHandler

    前面提到当请求进入到IIS,IIS转发给ISAPI后会根据文件的后缀名来决定将请求转发给对应的处理程序进行处理,当然一大部分的处理都是交给了AspNet_ISAPI 了.但是,AspNet_ISAPI ...

  6. 如何修改MFC的图标

    原文:如何修改MFC的图标 修改左上角的图标和任务栏里图标 在对话框构造函数中 CTestDlg::CTestDlg(CWnd* pParent /*=NULL*/) : CDialog(CTestD ...

  7. Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  8. CSU1020: 真三国无双

    1020: 真三国无双 Submit Page   Summary   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 1042   ...

  9. [BZOJ] 1037 [ZJOI2008]生日聚会

    Time Limit: 10 Sec Memory Limit: 162 MB Submit: 3007 Solved: 1795 [Submit][Status][Discuss] Descript ...

  10. Linux系统安装Apache

    一,Apache和tomcat的区别与联系 apache是web服务器,web服务器专门处理http请求: tomcat是运行在apache上的应用服务器: apache是普通服务器,本身只支持htm ...