props--父组件传递数据给子组件

最新推荐文章于 2023-11-18 12:38:53 发布

VIP文章 zmj2051176726

最新推荐文章于 2023-11-18 12:38:53 发布

阅读量821

点赞数

分类专栏： vue组件

本文链接：https://blog.csdn.net/xiaoxingxingzai/article/details/100119071

版权

props–父组件传递数据给子组件

一.概念
组件实例的作用域是独立的，这意味着不能并且不应该在子组件的模板内直接引用父组件的数据，但是父子组件之间需要通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。
在Vue.js中，父子组件的关系可以总结为props down,events up。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。
二.prop–父组件传递数据给子组件
prop是父组件用来传递数据的自定义属性，子组件需要显式地用props选项声明“prop”：

Vue.component('child',{
    props:["message"]  //声明props
    //就像data一样，prop可以用在模板内，同样也可以在vm实例中像“this.message”这样使用。
    template:'<span>{
  {message}}</span>
})

例如：

<body>
<div id="app">
    <ton msg="hhhhh"></ton>
</div>
<template id="myone">
    <h1>{
  {msg}}</h1>
</template>
</body>
<script>

    Vue.component('ton