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 相关文章推荐
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
关于 jQuery Easyui异步加载tree的问题解析
Dec 06 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
记录vue项目中遇到的一点小问题
May 14 Javascript
小程序点击图片实现png转jpg
Oct 22 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
解决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数据压缩、加解密(pack, unpack)
2016/12/17 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
python模拟鼠标拖动操作的方法
2015/03/11 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python实现发送邮件功能
2017/07/22 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python处理document文档保留原样式
2019/09/23 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
浅谈react路由传参的几种方式
2021/03/23 Javascript
大学毕业生求职自荐信
2014/02/20 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
先进党支部事迹材料
2014/12/24 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书