vue父组件向子组件传值

最新推荐文章于 2024-09-05 20:24:22 发布

原创最新推荐文章于 2024-09-05 20:24:22 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

本文探讨了在Vue中如何实现父组件向子组件传递数据，指出相较于传统方式，Vue的组件传值更加简便。通过实例说明了在父组件和子组件中的实现方法。

最近在学习vue发现组件传值很有意思，就比如之前在写原生项目的时候页面传值比较麻烦，vue里面的组件传值相对来说更简单。
父组件：

<template>
  <div id="app">
    <Header></Header>
      <Footer></Footer>
      <Content :sonConArr="conArr"></Content>
    <router-view/> 
  </div>
</template>


import Content from './components/content'//引入子组件
export default {

  name: 'App',
  data() {
    return {
       conArr:[//向子组件传递的数据
                {
                    name:'Caryl',
                    age:'20'
                },{
                    name:'Sindy',
                    age:21
                },{
                    name:'Nancy',
                    age:22
                }
            ]
    }
  },
  components:{
    Content    //注册组件
  }
}

子组件：

<template>
    <div>
        <ul v-for="(con,index) in sonConArr" :key="index">
            <li>{{con.name}}</li>
            <li>{{con.age}}</li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
       sonConArr:Array,//接受父组件向子组件传递的数据是一个数组
       required:true
    },
    data() {
        return {
           
        }
    },
}
</script>