<!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. SugarCRM安装踩雷（一）

    安装SugarCRM前置条件: 1.找对平台.正确版本的安装包 2.APACHE + MYSQL + TOMCAT环境先确保OK 坑1: 进入安装参数设置步骤的MYSQL用户密码——这里根据Mysql ...

  2. 微信小程序组件解读和分析：十五、switch 开关选择器

    switch 开关选择器组件说明: switch,开关选择器.只能选择或者不选.这种属于表单控件或者查询条件控件. switch 开关选择器示例代码运行效果如下: 下面是WXML代码: [XML] 纯 ...

  3. 绿化VSCode

    通过啃源码, 终于找到了解决办法, 设置环境变量: VSCODE_APPDATA=C:\Program Files\VSCode\UserData VSCODE_EXTENSIONS=%VSCODE_ ...

  4. php常用的一些代码

    1.获取用户真实ip function getIP() { if (getenv("HTTP_X_FORWARDED_FOR")) { // 这个提到最前面,作为优先级,nginx ...

  5. C++ class、struct区别

    一.默认访问控制不同(最主要) struct默认为public,class默认为private.这个访问控制既是指成员的默认访问属性,又指继承时默认的继承属性. 二.定义template时不同 在模版 ...

  6. 利用ObjectMapper readValue()和泛型解决复杂json结构

    import com.dj.fss.vo.MessageListVO; import com.fasterxml.jackson.annotation.JsonIgnoreProperties; im ...

  7. ascii - 在八进制，十进制，十六进制中的 ASCII 字符集编码

    描述 ASCII 是美国对于信息交换的标准代码,它是7位码,许多8位码(比如 ISO 8859-1, Linux 的默认字符集)容纳 ASCII 作为它们的下半部分.对应的国际 ASSII 是 ISO ...

  8. 【转】C# 二进制，十进制，十六进制 互转

    //十进制转二进制 Console.WriteLine(Convert.ToString(69, 2)); //十进制转八进制 Console.WriteLine(Convert.ToString(6 ...

  9. 模板—trie图

    做了某题之后发现trie的AC自动机太垃圾了,动不动就TLE,然后我就去学了trie图. #include<iostream> #include<cstdio> using n ...

  10. django显示图片

    dirctory vickey_django vickey(projectname) vickey __init__.py __pycache__ settings.py urls.py wsgi.p ...