vue.js父子组件通信动态绑定的实例


Posted in Javascript onSeptember 28, 2018

如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<div id='app'>
  <!--这里的作用是将父组件渲染到页面上-->
  <father></father>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<script type="text/x-template" id="father">
  <div>
    <!--这里实现一个双向绑定-->
    <!--parentMsg变量必须在data中声明,不然会报错,我就错在这个坑-->
    <input v-model="parentMsg">
    <br>
    <child :my-message="parentMsg"></child>
  </div>
</script>
<script type="text/x-template" id="child">
  <div> {{'父组件传递的数据为:'+ myMessage }} </div>
</script>
<script>

  Vue.component('father',{
//    这里我直接把template写到前面script标签中了,写在这里一大坨,难看
    template:'#father',
    data:function(){
      return {
        parentMsg:''
      }
    }
  });

  //在 Vue 中,父子组件的关系可以总结为 props down, events up。
  // 父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息
  Vue.component('child', {
    props: ['myMessage'],//这里的props选项是用来实现父子组件的通信的,传递下来的消息字组件用花括号接住
    template: '#child'
  });

  new Vue({
    el:'#app'
  })

</script>
</html>

以上这篇vue.js父子组件通信动态绑定的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在Web页面上直接打开、编辑、创建Office文档
Mar 12 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
浅谈javascript的url参数parse和build函数
Mar 04 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 #Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 #Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 #Javascript
学习jQuery中的noConflict()用法
Sep 28 #jQuery
代码分析vue中如何配置less
Sep 28 #Javascript
使用JavaScript破解web
Sep 28 #Javascript
详解node字体压缩插件font-spider的用法
Sep 28 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
优秀毕业生找工作自荐信
2014/06/23 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
优秀教研组申报材料
2014/12/26 职场文书
Win11查看设备管理器
2022/04/19 数码科技