Vue中父组件向子组件通信的方法


Posted in Javascript onJuly 11, 2017

Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述。下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示:

props

组件实例的作用域是孤立的。子组件的模板中是无法直接调用父组件的数据。

可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props

看下面的例子

<div id="app">
  <panda here='China'></panda>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
  Vue.component('panda',{
    props:['here'],
    template:`<div>panda from {{here}}</div>`
  })
  new Vue({
    el: '#app'
  })
</script>

页面上展示的是 panda from China

处理属性中带'-‘的问题

Vue是不支持带杠的写法的。

如果上述的here变成from-here。需要这样写(小驼峰的写法)

<div id="app">
  <panda from-here='China'></panda>
</div>
<script>
  Vue.component('panda',{
    props:['fromHere'],
    template:`<div>panda from {{fromHere}}</div>`
  })
  new Vue({
    el: '#app'
  })
</script>

如果需要动态绑定,需要用到v-bind

<body>
  <div id="app">
    <panda :here='msg'></panda>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
  Vue.component('panda',{
    props:['here'],
    template:`<div>panda from {{here}}</div>`
  })
  new Vue({
    el: '#app',
    data:{
      msg:'China'
    }
  })
  </script>
</body>

这样子组件就展示出了父组件的信息(把构造器中的data值传递给组件)。而且是动态绑定(用了v-bind)的。当父组件的data.msg发生变化的时候。子组件里面的内容也会相应的发生变化。

注意:props默认是单向绑定:当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改了父组件的状态

以上所述是小编给大家介绍的Vue中父组件向子组件通信的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
JS中常用的消息框总结
Feb 24 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 #Javascript
网页中的图片查看器viewjs使用方法
Jul 11 #Javascript
自定义事件解决重复请求BUG的问题
Jul 11 #Javascript
关于js中的鼠标事件总结
Jul 11 #Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 #Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 #Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 #Javascript
You might like
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php生成随机颜色的方法
2014/11/13 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP自定义函数获取URL中一级域名的方法
2016/08/23 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
javascript结合ajax读取txt文件内容
2014/12/05 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Python流程控制 if else实现解析
2019/09/02 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
开会迟到检讨书
2014/01/08 职场文书
中学生期末评语
2014/02/03 职场文书
人力资源管理专业应届生求职信
2014/04/24 职场文书
2014个人年度工作总结范文
2014/12/24 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
MySQL分区表管理命令汇总
2022/03/21 MySQL
Redis 异步机制
2022/05/15 Redis