怎样使用父组件向子组件传值【 必看】

呃呃,首先小仙女初学Vue传值的时候,是费尽了脑汁,不知道怎么回事。终于,功夫不负有心人,把他弄明白了,如有错误,请多指教!!

怎样使用父组件向子组件传值【 必看】

父组件向子组件传值

    • 父向子传递props
    • 传递复杂数据

首先在学习Vue的框架开发的项目过程中,会经常会用到组件来管理不同的功能,有些公共的东西会就会被抽取出来,当做组件去使用。
这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?就先和小编一起探究一下吧!

父向子传递props

Vue.component("introduce",{
    // 直接使用props接收到的属性来渲染页面
    template:'

{{title}}

', props:['title'] // 通过props来接收一个父组件传递的属性 })
  • 这个子组件中要使用title属性渲染页面,但是自己并没有title属性
  • 通过props来接收父组件属性,名为title
    父组件使用子组件,同时传递title属性:



    
    父向子传递
    




    






效果如下:

传递复杂数据




    
    父向子传值
    





    






效果图:

好了,父组件向子组件传值,就是这么 easy ! 你 学会了吗? 如果还不会,别着急,一张图绝对搞定

看好了!!!!!!!!!!!!!!!

哎呀呀,好了,以上内容就是父组件向子组件传值!!!!!!

版权声明:如无特殊标注,文章均来自网络,本站编辑整理,转载时请以链接形式注明文章出处,请自行分辨。

本文链接:https://www.shbk5.com/dnsj/75149.html