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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
js 居中漂浮广告
Mar 21 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
js合并两个数组生成合并后的key:value数组
May 09 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
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript 模拟点击广告
2010/01/02 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[00:32]2016完美“圣”典风云人物:Maybe宣传片
2016/12/05 DOTA
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
会务接待方案
2014/02/27 职场文书
一句话工作感言
2014/03/01 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年学生会个人工作总结
2014/11/07 职场文书
2015夏季作息时间调整通知
2015/04/24 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
golang interface判断为空nil的实现代码
2021/04/24 Golang
pytorch 实现变分自动编码器的操作
2021/05/24 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL