侧边栏壁纸
博主头像
波哥

80后程序猿&副业达人
爱好:敲代码、搞副业
无干货,不分享!

  • 累计撰写 1,863 篇文章
  • 累计创建 77 个标签
  • 累计收到 16 条评论

目 录CONTENT

文章目录

Vue中使用props父组件向子组件传值

波哥
2022-12-20 / 0 评论 / 0 点赞 / 41 阅读 / 240 字

Vue中使用props父组件向子组件传值

" "

父子组件可以利用pros直接传值,在子组件中定义props,并可规定传值类型,当父组件使用子组件时传入相应参数,即可把父组件的数值传递到子组件中。

父组件:App.vue

父组件中:msgchange的冒号不能省略,加:冒号传递变量,不加传递字符串

<template>
  <div id="app"> 
    {{msg}}
    <hellochange :msgchange=msgdata></hellochange>
  </div>
</template>

<script>
import HelloChange from './components/HelloChange.vue'

   export default {  
    components:{
        hellochange:HelloChange
    },   
      data () { 
        return {     
         msg:'你好vue',
         msgdata:'我是父组件传值'
        }
      }   
    }
</script>

子组件HelloChange.vue

子组建中通过在Props定义msgchange接收父组件传递的值。

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="hellochange">  
       {{msg}}
       <br>
       {{msgchange}}   
    </div>
</template>

<script>
    export default{
        data(){
            return {             
               msg:'我是一个home组件'           
            }
        },
        props:{
            msgchange:{
                type:String
            }
        }
    }
</script>

输出

image

0

评论区