Vue语法（5）

目录

1. 属性传值

2. CSS

2.1 全局css

2.2 局部CSS

3. 自定义事件

4. 插槽

---

1. 属性传值

父组件通过属性给子组件传值

父组件：<Box :title="msg" />

子组件：注册属性props:[ "title"] ——使用<div>{{ title }}</div>

下篇文章Vue传值详细介绍——https://mp.csdn.net/mp_blog/creation/editor/131162536

2. CSS

2.1 全局css

        a. 任何组件的style标签内部的css都是全局的。因为webpack/vite打包时，会把所有组件的diamante全部挂到html文件中

        b.任何文件import引入的css文件都是全局的

        c. style的src文件的css都是全局的

2.2 局部CSS

        不同组件中，类名相同时，想要设置不同的样式，但会产生冲突，根据vue文件的引入顺序来决定最终样式。

解决办法：1. 使用不同类名 团队开发效率低

                   2. 使用后代选择器

                   3. 使用局部CSS：用法：<style scoped> </style>

vue框架中，style标签的scoped实现css作用域的原理：

打包工具在打包时，会为每一个组件内部的所有元素添加一个独立的属性：

1. 为当前文件的模板中的每一个元素添加相同的属性名

2. 给css和选择器添加一个属性选择器[上面生成的独立属性名]

同一个文件中，可以有多个style标签，比如说一个style标签写局部样式，一个写全局样式。一般全局样式写成一个css文件，然后在main.js中引入该css文件

style标签的属性：<style scoped lang="scss"></style> lang属性是预编译的语言，如果写scss样式，需要先安装：npm install sass -D        -D相当于 ---save-dev

3. 自定义事件

vue3.0 组件绑定原生事件时直接绑定，vue2.0 组件绑定原生事件时需要添加.native。

自定义事件：父组件绑定自定义事件，子组件设计自定义事件

<Box2 v-on:myevent="fm"></Box2>       

fm为父组件中的方法：

    fm() {
      console.log("Box的自定义事件，点击三次触发");
    }

子组件：

    <div @click="fn">
        <h1>box2</h1>
    </div>

fn为子组件中的方法，在该方法中设计myevent事件。

    data() {
        return {
            count: 0
        }
    },
    methods: {
        fn() {
            this.count++;
            if (this.count === 3) {
                this.$emit("myevent")

            }
        }
    }

4. 插槽

语法：<slot name="插槽名"> 插槽位置 </slot>

使用：设计 <template v-slot:插槽名> </template> 

           语法糖：

               <template #插槽名>

                       <Box>组件尖括号内部的内容为要插入的内容</Box>

                </template>