Vue中如何利用父组件向子组件通信

这篇文章主要介绍了Vue中如何利用父组件向子组件通信的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue中如何利用父组件向子组件通信文章都会有所收获，下面我们一起来看看吧。

站在用户的角度思考问题，与客户深入沟通，找到太子河网站设计与太子河网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖太子河地区。

props

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

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

看下面的例子

页面上展示的是 panda from China

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

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

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

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

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

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

关于“Vue中如何利用父组件向子组件通信”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue中如何利用父组件向子组件通信”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。

分享标题：Vue中如何利用父组件向子组件通信
标题链接：http://kswjz.com/article/jeihej.html

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

行业动态