父组件向子组件传值props

最新推荐文章于 2025-02-22 11:17:43 发布

我是你要找的bug

最新推荐文章于 2025-02-22 11:17:43 发布

阅读量202

点赞数

分类专栏： Vue 组件父子组件文章标签： vue 组件

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/108493830

版权

Vue 同时被 3 个专栏收录

19 篇文章

订阅专栏

组件

7 篇文章

订阅专栏

父子组件

3 篇文章

订阅专栏

本文通过两个案例展示了在Vue中父组件如何向子组件传递数据。第一个案例使用了简单的属性绑定来传递电影列表和消息；第二个案例则通过props传递了一个包含姓名、年龄和身高的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件向子组件通信的两个案例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  
  <div id="app">
   <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
  </div>
  
  <template id="cpn">
   <div>
    <p>{{cmovies}}</p>
    <h2>{{cmessage}}</h2>
   </div>
  </template>
  
  <script src="js/vue.js"></script>
  <script>
   //父传子：props
   const cpn={
    template:'#cpn',
    props:['cmovies','cmessage'],
    data(){
     return{
      
     }
    },
    methods:{
     
    }
   
   }
   
   const app = new Vue({
    el:"#app",
    data:{
     message:"nihao",
     movies:["海王","海贼王","海尔兄弟"]
    },
    components:{
     "cpn":cpn
    }
   })
  </script>
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  
  <div id="app"> 
   <cpn :cinfo="info"></cpn>
  </div>
  <template id="cpn">
   <h2>{{cinfo}}</h2>
  </template>
  
  <script src="js/vue.js"></script>
  <script>
   const cpn={
    template:'#cpn',
    props:{
     cinfo:{
      type:Object,
      default(){
       return{}
      }
     }
    }
   }
   
   const app = new Vue({
    el:"#app",
    data:{
     info:{
      name:"tiantian",
      age:18,
      height:1.68
     }
    },
    components:{
     'cpn':cpn
    }
   })
  </script>
 </body>
</html>