资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

Vue中怎么利用父组件向子组件通信

今天就跟大家聊聊有关Vue中怎么利用父组件向子组件通信,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

成都创新互联专业为企业提供南澳网站建设、南澳做网站、南澳网站设计、南澳网站制作等企业网站建设、网页设计与制作、南澳企业网站模板建站服务,十多年南澳做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

props

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

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

看下面的例子


  

页面上展示的是 panda from China

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

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

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


  

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


  
    
  
        

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

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

看完上述内容,你们对Vue中怎么利用父组件向子组件通信有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。


分享文章:Vue中怎么利用父组件向子组件通信
网页路径:http://www.cdkjz.cn/article/jgepgg.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220