Vue语法（5）-CSDN博客

本文链接：https://blog.csdn.net/weixin_46684391/article/details/131122387

文章详细介绍了Vue中组件间的属性传值方法，包括父组件向子组件传递值。讨论了全局CSS与局部CSS的差异及解决样式冲突的策略，如使用scoped属性。还阐述了自定义事件的创建与监听，以及插槽的使用，用于自定义组件内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

语法糖：

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

</template>