Vue3-18 组件基础

组件的定义

我们在项目的src/components种定义组件，vue提供了几种简单的组件的定义方式

在单文件种定义组件

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
  <div>
    第一种
    <button @click="count++">点击增加到 {{ count }} .</button>
  </div>
</template> 

是的，他和我们正常写vue是一样的

在单文件中使用template定义

<template id="testC">
  <div>
    第二种
    <button @click="count++">点击增加到 {{ count }} .</button>
  </div>
</template> 
    <script lang="ts">
    import { ref } from 'vue'
    
    export default {
        setup(){
        const count = ref(1)
         return count
    },
      template: "#testC"
    }
    </script>

组件向下传递信息

从父组件传递到子组件，我们需要使用props进行传递

<template>
    <div>
        table传参
        <!-- <table>
            <tr v-for="data in datas.datas" :key="data.name">
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
            </tr>
        </table> -->
        <table>
            <tr v-for="data in datas2" :key="data.name">
                <td>{{ data.name }}</td>
                <td>{{ data.age }}</td>
            </tr>
        </table>
    </div>
  
 
</template>
 <script lang="ts">
 export default {
    props: ['datas2'],
    setup(props) {
        const datas2 = props
        console.log(datas2)
        return datas2
    }
 }
 </script>
<!-- <script lang="ts" setup>
    import { ref } from 'vue'
    const datas = defineProps(['datas'])
</script> -->

这分别是script有setup和没有的方式，将注释的代码解开就是第二种，要把第一种注释哦，父组件可以用

        <table-components :datas="data" :datas2="data2"/>

属性将组件值传递进去，这里可以使用vue双向绑定进行消息的传递

组件向上传递信息

当我们向用子组件中的按钮控制父组件中的字体大小时，我们可以使用$emit方式进行消息的传递例如：子组件

<template id="testC">
       <div>第二种
        <button @click="$emit('enlarge-text')">
          点击放大张三
        </button></div>
</template>
    <script lang="ts">
    import { ref } from 'vue'
    
    export default {
      template: "#testC"
    }
    </script>

父组件：

    <div :style="{fontSize: fontSize+'em'}">
        <div>ZHANGSAN</div>
        <count-add-two-components @enlarge-text="fontSize += 0.1"/>
    </div>

我们很轻易的就可以控制组件的大小

      关注公众号：资小库，回复vue，下载练习代码，问题快速答疑解惑