Vue3 #5

1.Global css 

  如果在全局中需要使用一些样式，可以新建一个文件global.css（文件名自定义，文件可以设在assets文件夹下），但是仅完成这一步，编写的全局样式并不会起作用，需要在main.js文件中添加一段代码

import './assets/global.css'

2.Props

  props大多数用于父传子的功能中，一般将父组件的数据传递给子组件。

  下面通过一个小案例进行演示，

  第一步：在父组件 <Modal /> 中，进行动态数据绑定（注意是动态绑定，因此需要加 ：）,

<Modal :header='Sign u for Giveaway' :text='Grab your ninja swag for half price' />

但是这种写法过于冗长，一般可以简化为，

<Modal :header='header' :text='text' />

然后在<script></script>中添加代码，

data() {
    return {
      header: 'Sign u for Giveaway',
      text: 'Grab your ninja swag for half price'
    }
  }

  第二步：在子组件中，可以用一些简单的方式将父组件中动态绑定的数据显示出来，

<p>{{ header }}</p>
<p>{{ text }}</p>

但最重要的是，需要在<script></script>中把动态绑定的数据进行注册，

<script>
export default {
    props: ['header', 'text']
}
</script>

3.Click event modifiers：

  在点击事件时，如果设置用户点击特定键才能触发事件，则 @click=" " 改写为 @click.__=" " （ __ 上可以编写right shift alt 等按键）

4.slots：

  slots 意思为插槽，用于在一个静态模板中，编写的数据想重复应用在多个模板中，这时可以考虑使用 slots。下面通过一个小案例进行演示：（划线部分的代码相关联）

<template>
  <div v-if="showModal">
  <Modal :header='header' :text='text'>
    <h1>The Nin jia</h1>
    <p>This is a little case</p>
  </Modal>
  </div>
  <button @click="toggleModal">open Modal</button>
</template>

ps：这里是App.vue中的代码

<template>
    <div class="backdrop">
        <div class="modal">
            <slot></slot>
        </div>
    </div>
</template>

ps：这里是Modal.vue中的代码

现在拓展关于slot的知识：命名插槽；命名