Vue 父子组件、组件间通信


Posted in Javascript onMarch 08, 2017

本人对Vue组件间通信不懂,搜索了很多关于Vue 父子组件间通信介绍,下面我来记录一下,有需要了解Vue 父子组件、组件间通信的朋友可参考。希望此文章对各位有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/Vue.js"></script>
  <script>
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        data:{},
        components:{
          aaa:{
            template:'<h2>这是aaa组件<bbb></bbb></h2>',
            components:{
              bbb:{
                template:'<h2>这是bbb组件</h2>'
              }
            }
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <aaa></aaa>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue1.0.js"></script>
  <script>
    //子组件获取父组件的值
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {
          a: 'aaa'
        },
        components: {
          'aaa': {
            data(){
              return {
                msg: 111,
                msg2: '这是父组件的数据'
              }
            },
            template: '#aaa',
            components: {
              'bbb': {
                //html中的my-msg这种形式,js中应该采用驼峰命名myMsg
                props: ['mmm', 'myMsg'],
                template: '<h3>我是bbb组件->{{mmm}}<br>{{myMsg}}</h3>'
              }
            }
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <aaa>
  </aaa>
</div>

<template id="aaa">
  <h1>11111</h1>
  <bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue1.0.js"></script>
  <script>
    //子组件获取父组件的值
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {
          a: 'aaa'
        },
        components: {
          'aaa': {
            data(){
              return {
                msg: 111,
                msg2: '这是父组件的数据'
              }
            },
            template: '#aaa',
            components: {
              'bbb': {
                //html中的my-msg这种形式,js中应该采用驼峰命名myMsg
                props: ['mmm', 'myMsg'],
                template: '<h3>我是bbb组件->{{mmm}}<br>{{myMsg}}</h3>'
              }
            }
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <aaa>
  </aaa>
</div>

<template id="aaa">
  <h1>11111</h1>
  <bbb :mmm="msg2" :my-msg="msg"></bbb>
</template>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父组件获取子组件的值</title>
  <script src="../js/vue1.0.js"></script>
  <script>
    //父组件获取子组件的值
    window.onload = function () {
      var vm = new Vue({
        el:'#box',
        data:{
          a:'aaa'
        },
        components:{
          'aaa':{
            data(){
              return {
                msg:111,
                msg2:'我是父组件的数据'
              }
            },
            template:'#aaa',
            methods:{
              get(msg){
                this.msg = msg;
              }
            },
            components:{
              'bbb':{
                data(){
                  return {
                    a:'我是子组件的数据'
                  }
                },
                template:'#bbb',
                methods:{
                  send(){
                    this.$emit('child-msg',this.a);
                  }
                }
              }
            }
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <aaa></aaa>
</div>
<template id="aaa">
  <span>我是父级 -》 {{msg}}</span>
  <bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
  <h3>子组件</h3>
  <input type="button" value="send" @click="send" />
</template>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQueryUI的Dialog的简单封装
Jun 07 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js使用ajax读博客rss示例
May 06 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery实现新消息在网页标题闪烁提示
Jun 23 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
Apr 05 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
Bootstrap响应式表格详解
May 23 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 #Javascript
vue-resourse将json数据输出实例
Mar 08 #Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 #Javascript
js实现五星评价功能
Mar 08 #Javascript
ionic2 tabs 图标自定义实例
Mar 08 #Javascript
微信小程序 弹窗自定义实例代码
Mar 08 #Javascript
jQuery实现图片滑动效果
Mar 08 #Javascript
You might like
PHP 压缩文件夹的类代码
2009/11/05 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
javascript中对对层的控制
2006/12/29 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
深入浅析python 中的匿名函数
2018/05/21 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
python redis 删除key脚本的实例
2019/02/19 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
《鸿门宴》教学反思
2014/04/22 职场文书
部队个人年终总结
2015/03/02 职场文书
职称评定个人总结
2015/03/05 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python