Vue中父组件向子组件通信的方法
作者:cofecode 时间:2024-04-26 17:37:32
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中父组件向子组件通信的方法网站的支持!
来源:http://blog.csdn.net/cofecode/article/details/74933016
标签:vue,父组件,子组件,通信
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python数据类型-序列sequence
2022-06-07 11:03:56
![](https://img.aspxhome.com/file/2023/1/123581_0s.png)
详解一条sql语句在mysql中是如何执行的
2024-01-18 00:51:12
![](https://img.aspxhome.com/file/2023/2/85802_0s.jpg)
javascript根据像素点取位置示例
2023-09-03 22:58:54
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2024-04-25 13:09:00
细化解析:SQL Server数据库的集群设计
2009-02-05 15:59:00
Python OpenCV实现传统图片格式与base64转换
2021-07-20 21:42:21
Python中正则表达式的用法总结
2021-04-23 17:04:49
CentOS Linux更改MySQL数据库目录位置具体操作
2024-01-23 18:13:49
Python 制作自动化翻译工具
2022-08-17 05:34:50
![](https://img.aspxhome.com/file/2023/0/134970_0s.png)
System.Data.OleDb.OleDbDataAdapter与System.Data.OleDb.OleDbDataReader的区别是什么?
2009-10-29 12:17:00
Python向Excel中插入图片的简单实现方法
2022-09-27 21:41:59
![](https://img.aspxhome.com/file/2023/4/66434_0s.png)
MySQL之Explain详解
2024-01-12 21:14:55
![](https://img.aspxhome.com/file/2023/2/121582_0s.png)
关于多域名COOKIES作用域的问题
2008-11-18 16:12:00
MySQL5.7中的JSON基本操作指南
2024-01-27 20:38:34
golang监听文件变化的实例
2024-05-08 10:24:34
pandas DataFrame 行列索引及值的获取的方法
2022-03-24 06:14:11
python从入门到实践之字典
2023-05-11 22:20:17
python数据分析实战指南之异常值处理
2023-04-19 21:02:18
![](https://img.aspxhome.com/file/2023/9/123479_0s.png)
VMware中Linux共享mysql数据库的方法
2024-01-27 12:25:50
![](https://img.aspxhome.com/file/2023/0/93940_0s.jpg)
设计者在网页排版中应注意的一些问题
2012-04-20 13:13:58