父组件向子组件传值props

最新推荐文章于 2024-05-17 08:00:00 发布

我是你要找的bug

最新推荐文章于 2024-05-17 08:00:00 发布

阅读量149

点赞数

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

本文链接：https://blog.csdn.net/XUYIGE/article/details/108493830

版权

Vue 同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

组件

7 篇文章 0 订阅

订阅专栏

父子组件

3 篇文章 0 订阅

订阅专栏

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

<!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>

我是你要找的bug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父组件向子组件传值props

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <cpn v-bind:cmovies="movies" :cmessage="message"></cpn> </div>
复制链接

扫一扫