[Vue,组件] 如何由父组件传值（Value）给子组件

以下会用到 Pug 套件，请去安装 pug套件，可参考：

从头开始用 Laravel 来做CRUD -12- 架设 - npm - pug

重点： props

假设情境如，如在父组件 table 中，checkbox 複选取多资料，传入子组件，由子组件判断其选择的数量，子组件可显示数选取的数量。

1、Parents.vue template

<template lang="pug">div    app-child(        v-bind:child-selected="parents_selected"    )</template>

2、Parents.vue script

<script>import Child from './Child.vue'export default{    components:{        appChild: Child,    },    data(){        return {            parents_selected: [],        }    }}</script>

3、Child.vue template

<template lang="pug">div    p {{childSelected}}</template>

4、Child.vue script

export default{    props: {        childSelected: {type: String},    }}

利用上方简易的写法，我们在父组件中，利用bind 的方式，将 parents_selected 的阵列，导入到 app-child 子组件中

而在子组件中，利用 props ，让子组件知道父组件有传来的资料，并宣告变量型态，此变量型态要正确，不然会报错。

注意事项：

在规範中，父组件 bind 的部份要 child-selected 而在 子组件要写成 childSelected ，特别要注意喔！

--- 相关文章 ----
[Vue,组件] 如何由父组件按钮去执行子组件的方法 (methods)
[Vue,组件] 如何由子组件按钮去执行父组件的方法 (methods)
[Vue,组件] 如何由父组件传值（Value）给子组件
[Vue,组件] 如何由子组件传值（Value）给父组件
--- 更多的文章 在痞客邦 ----
痞客邦

感谢

感谢各位的观看！
友情连结：钻头-瑜诚
文中如有技术不良或写错的部份，如您愿意指出，我们也很乐意接受您的指正，但请不要恶意攻撃，我们只是为了乐趣而写的文章。