vue 父传子 props 静态属性和动态属性

Props 静态属性

<template>
  <div>
     <ConpentA  title="我是静态props"/>
  </div>
</template>
<script>
  import ConpentA from './components/ConpentA.vue'
  export default {
    components:{
      ConpentA
    }
  }
</script>

<style scoped>

</style>
 
<template>
   <div>
       <h1>{{ title }}</h1>
   </div>
</template>

<script>
  export default{
    props:{
        title:String,
        default:''
    }
  }
</script>
 
Props 动态属性
<template>
  <div>
     <ConpentA  :title="message"/>
  </div>
</template>
<script>
  import ConpentA from './components/ConpentA.vue'
  export default {
    data(){
      return{
        message: '1111'
      }
    },
    components:{
      ConpentA
    }
  }
</script>

<style scoped>

</style>
posted @ 2024-02-14 21:49  学无边涯  阅读(17)  评论(0编辑  收藏  举报