vue学习笔记21-组件传递数据_Props

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的

传递数据的解决方案就是props

父级：

在父级中引入子集

 
<script>
import Child from "./Child.vue"
export default {
    data() {
        return{
            
        }
    },
    components:{
        Child
    }
}
script>

而父级在App里引入

 
<script>
 
import Parent from "./components/Parent.vue"
 
export default {
  components:{
    
   Parent
  }
}
script>
 
<style>
 
style>

父级将数据传送给子集，在父级中写出如下代码

而在子级组件中，如下编写

 
<script>
export default {
    data() {
        return{
            
        }
    },
    props:["title"]//在这里以字符串形式存在
}
script>

 成功传入

当然也可以传递多个数据，且传递的数量没有限制

父级中

子集中

 
<script>
export default {
    data() {
        return{
            
        }
    },
    props:["title","demo"]//在这里以字符串形式存在
}
script>

动态数据传递

通过下面代码就可以实现动态数据传递

 
<script>
import Child from "./Child.vue"
export default {
    data() {
        return{
            message:"Parent数据!"
        }
    },
    components:{
        Child
    }
}
script>

成功

注意事项：

proos传递数据只能从父级传递到子集，不能反其道而行