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 相关文章推荐
javascript 面向对象编程基础:封装
Aug 21 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
JavaScript中清空数组的三种方法分享
Apr 07 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
Sep 13 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
vue如何引用其他组件(css和js)
Apr 13 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
微信小程序自定义底部弹出框动画
Nov 18 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
php的计数器程序
2006/10/09 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
Jquery实现简单的动画效果代码
2012/03/18 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
探讨js中的双感叹号判断
2013/11/11 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
JavaScript设置名字输入不合法的实现方法
2017/05/23 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
python 限制函数调用次数的实例讲解
2018/04/21 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Django数据库迁移常见使用方法
2020/11/12 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
校本教研工作制度
2014/01/22 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
入伍通知书
2015/04/23 职场文书
2015元旦感言
2015/12/09 职场文书