Vue组件通信、插槽

1.组件

          组件允许我们将界面划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：   

定义一个组件 

      当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)。

          以下定义了一个计算点击次数ClickCount.vue的组件：

<script setup>    import { ref } from 'vue';    let count=ref(0) </script> <template>    <button @click="count++">你点击了{ { count }}次</button> </template>

 使用组件

       要使用一个子组件，我们需要在父组件中导入它。

      将计算点击次数ClickCount.vue导入到父组件中，这个组件将会以默认导出的形式被暴露给外部。

<script setup>   //导入组件   import ClickCount from './components/ClickCount.vue'; </script> <template>    <ClickCount></ClickCount><br/> </template>

     通过 <script setup>，导入的组件都在模板中直接可用。

组件可以被重用任意多次：

<ClickCount></ClickCount><br/>   <ClickCount></ClickCount><br/>   <ClickCount></ClickCount><br/>

              你会注意到，每当点击这些按钮时，每一个组件都维护着自己的状态，是不同的 count。这是因为每当你使用一个组件，就创建了一个新的实例。

在单文件组件中，子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。虽然原生 HTML 标签名是不区分大小写的，但 Vue 单文件组件是可以在编译中区分大小写的。我们也可以使用 /> 来关闭一个标签。

<clickCount/>

2.组件通信 (主讲：父子组件传值)

    1. props  父 传 子

作用：props是使用频率最高的一种通信方式

常用于：父组件给子组件传递值，父 传 子。

实现技术：自定义属性，属性值是需要传的数据。

单向数据流效果：

父组件修改值，子组件发生变化

子组件修改值，父组件不会感知到。父组件传到子组件的值是只读的

实现步骤 

     父组件 Father.vue

<script setup>     import { ref } from 'vue';     import Son from './Son.vue';    //父组件的数据    let car=ref('迪奥')    //换车：修改父组件的数据，子组件也会修改    function changeCar(){       car.value='宝马'    } </script> <template>    <div class="father">       <h1>父组件</h1>       <p>我的车:   { { car}}</p>       <button @click="changeCar">换车