vue父子组件-子组件使用父组件的数据

最新推荐文章于 2024-04-14 23:34:00 发布

林夕的树屋

最新推荐文章于 2024-04-14 23:34:00 发布

阅读量429

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/linxidshuwu/article/details/122299534

版权

子组件通过props访问父组件的数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>父子组件通信练习</title>
</head>
<body>

<div id="app">
  {{message}}
  <cpn :books="books"></cpn>
</div>

<template id="cpn">
  <ul>
    <li v-for="(item,index) in books">{{index+1}}.{{item}}</li>
  </ul>
</template>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'动漫人物大选',
      books:["宇智波鼬", "杀生丸", "塞巴斯蒂安·米卡艾利斯", "利威尔", "宙斯"]
    },
    components:{
      cpn:{
        template:'#cpn',
        props:{ //接收父组件的数据
          books:{
            type:Array,
            default(){
              return []
            },
            required:true
          }
        }
      }
    }
  })
</script>

</body>
</html>