重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://cqcxhl.cn/article/jeihej.html