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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
vue-cli脚手架引入图片的几种方法总结
Mar 13 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 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缓存技术的多种方法小结
2012/08/14 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
Display SQL Server Version Information
2007/06/21 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
JSONP之我见
2015/03/24 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
推荐11个实用Python库
2015/01/23 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
django之session与分页(实例讲解)
2017/11/13 Python
python实现dijkstra最短路由算法
2019/01/17 Python
python元组的概念知识点
2019/11/19 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
Python socket处理client连接过程解析
2020/03/18 Python
python实现一个猜拳游戏
2020/04/05 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
十佳青年个人事迹材料
2014/01/28 职场文书
会计助理岗位职责
2014/02/17 职场文书
初三学生个人自我评定
2014/04/06 职场文书
计划生育宣传标语
2014/06/21 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
财务会计求职信范文
2015/03/20 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
PyTorch中permute的使用方法
2022/04/26 Python