[前端暴龙机，Vue2.x 进化 Vue3 ] Day16.父子组件的沟通-props

在上一篇的内容中，已经介绍到了该如何写一个组件并完成应用了，现在再继续进入更深一点的运用吧~
对於 Vue 的实体来说，我们称之为 父组件，而在里面所使用的称之为 子组件

今天，先介绍父祖件是如何传递资料给子组件的

父组件传递资料给子组件:Props

从图片中，我们可以大致上看出来以下几点

• 父组件向子组件的沟通是透过 Props
• 子组件向父祖件的沟通是透过 $emit (先破题，今天还不会介绍XD)
• Props 是单向数据流的设计模式(为了避免子组件无意间修改了父组件的资料)

父组件(传送资料)

父组件的传送资料方式透过 props(v-bind 的使用) 将资料传给子组件 [此为动态绑定的方式]

// 使用方式
<component :自定义的名称="父层要传送过去的 data 内容"></component>

// 范例
<div id="app">
 <counter :message="msg"></counter>
</div>

注意!! Props 的大小写

在 HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:

<!-- 在 HTML 中是 kebab-case 的 -->
<!-- postTitle 要写成 post-title -->
<blog-post post-title="hello!"></blog-post>

子组件(接收资料)

<div id="app">
 <counter :message="msg"></counter>
</div>

<script>

// 使用 props 来接收父组件传递的资料
Vue.component("counter",{
    template:`
      <div>
        子组件拿到了父祖件的资料 -- {{ message }}
      </div>
    `,
    props: ['message'], 
});

var app = new Vue({
  el: '#app',
  data:{
    msg: "我是父组件要传送的包裹"
  },
})
</script>

用 props: ['message'] 接收父层传递的资料，可以直接拿 message 来使用，就可以成功看到了画面

注意!!

如果 props 命名使用 kebab-case (短横线分隔命名) 命名规则，在接收资料时需还原成 camelCase (驼峰命名法) 命名规则(参考上面 注意!! Props 的大小写 范例，这边就需要还原成 camelCase 命名)

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

关於父组件向子组件传递资料其实还有可以为传递的资料做验证，不过这边就没提到，有兴趣的可以再找找文章，下一篇来介绍 子组件向父组件的沟通 $emit

图片来源

RIP Tutorial, When should I use events ?

参考资料

Vue 官方文件 通过 Prop 向子组件传递数据
Vue 官方文件 Prop
Lilybon Blog Vue.js - 组件间沟通
跟着 Vue 闯荡前端世界 - 06 父子组件沟通 pass props / emit event, 搞搞就懂
父子组件沟通原则
Component 的沟通方式 :props Day 14, iT邦帮忙 闪光洽