Vue父组件向子组件传值

父组件`FatherComponent.vue`，子组件`SonComponent.vue`

在父组件中定义变量

export default {
    data() {
        return {
            name: "父组件传给子组件的变量name",
            lists: "父组件传给子组件的变量lists",
        }
    },
}

在父组件中调用、注册、引用子组件

调用import SonComponent from './SonComponent.vue';

export default {
components: {SonComponent}, 注册子组件
data() {
    return {
        name: "父组件传给子组件的变量name",
        lists: "父组件传给子组件的变量lists",
    }
},
}

引用,在父组件和子组件链接的地方（即引用子组件的标签上），把父组件的值绑定给子组件：
```
父组件给子组件传值
<SonComponent v-bind:lists="lists" v-bind:query="name"></SonComponent>
```

总的来说父传子就是这三个步骤：父组件中定义值、调用子组件并引用、在引用的标签上给子组件传值。但是注意是要用v-bind: 绑定要传的值，不用v-bind直接把值放到标签上，会被当成html的节点属性解析的。
子组件内部接收父组件传过来的值：props（小道具）来接收：
```
export default {
    props: ["lists", "query"],
}
```

子组件内部使用父组件的值

<div id="accordion" v-if="lists" class="container">
    <div class="card  col-lg-12" v-for="list in lists">
        <div class="card-header">
            {{list}} 使用父组件的值
        </div>
    </div>
</div>

注意

子组件接受的父组件的值分为——引用类型和普通类型两种，

普通类型：字符String、数字Number、布尔值Boolean、空Null
引用类型：数组Array、对象Object

其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，

但是，引用类型的值，当在子组件中修改后，父组件的也会修改，那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。除非你有特殊的要求这么去做，否则最好不要这么做。

父组件传给子组件的值，在子组件中千万不能修改，因其数据是公用的，改了所有引用的子组件就都改了。

父组件FatherComponent.vue，子组件SonComponent.vue

注意

父组件`FatherComponent.vue`，子组件`SonComponent.vue`