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

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

props

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

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

看下面的例子

页面上展示的是 panda from China

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

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

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

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

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

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

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