组件传值-插槽-props-动态class

最新推荐文章于 2024-01-26 10:33:32 发布

混水的鱼

最新推荐文章于 2024-01-26 10:33:32 发布

阅读量1.2k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_51545970/article/details/126612347

版权

本文总结了Vue组件的使用，包括虚拟DOM的概念，组件的创建与使用，以及组件间的通信方式。重点讲解了props用于父传子数据传递，插槽实现内容分发，特别是作用域插槽用于子传父数据，以及动态绑定class和style的方法。此外，还介绍了访问子组件数据的$children和$refs，以及子组件访问父组件数据的$parent。

摘要由CSDN通过智能技术生成

7.11总结

1. 虚拟DOM

通过js对象结构, 模拟html标签结构的一种数据形式, 它并不是标签元素, 只不过结构和标签元素结构相似而已, 虚拟DOM只针对数据对象操作, 与页面视图无关,所以虚拟DOM执行的效率比真实的DOM执行的效率要高

简单来说就是, 当我们使用vue在对标签进行渲染的时候, vue会先创建一个虚拟的dom对象, 这个对象和真实的dom其实是一样的

当我们需要操作dom对数据进行渲染的时候, 在创建一个新的虚拟dom, 拿这个新的虚拟dom和旧的虚拟dom做对比, 使用diff算法, 把与之前不相同的数据渲染到页面上.

2. vue组件介绍

什么是组件

组件是一个vue项目基本组成部分, 分为三种: 根组件, 全局组件, 局部组件.一个vue项目至少要有一个组件, 就是根组件(new Vue()), 其他的组件可以根据需求去添加

如何创建组件

根组件: 使用new Vue创建vue对象默认都有创建

全局组件: 在全局作用域下, 使用Vue.component()定义的组件, 在全局范围可以使用

局部组件: 在一个组件内部中使用components字段定义的组件, 只能在它所在的组件中去使用

配置组件

      // component 注册组件
      Vue.component("myCom1",{
   
            // 可以使用name属性配置指定组件在开发者工具中呈现的名字
             name: "ztp",
            // 根组件的 el 绑定 组件是 template 绑定
            // template 会代替 #app 中所以的内容
            template: "<h4>这是全局组件模板{
   { age }}</h4>",
            // 在根组件中data直接是对象, 在全局和局部中data是函数返回对象 剩下是都是一样的 根组件有的字段这个都会有
            data() {
   
                return {
   
                    age: 20
                }
            },
            methods: {
   },
        })

如何使用组件

组件定义之后会有一个组件名, 把组件名当做标签名调用即可(可以把组件认为是vue给h5添加的自定义标签)

注意: 组件在定义的时候可以是小写, 也可以是小驼峰, 但是使用组件的时候要通过 “-” 把小驼峰转成小写

     // 使用组件
     <div id="app">
     // 使用全局组件 ----> 因为组件名是小驼峰命名 myCom1 所以要使用 - 分开写
     <my-com1></my-com1>
     // 局部组件使用
     <my-com2></my-com2>
     </div>

     // 在脚手架中可以使用 单标签(闭合标签) 直接使用
     <my-com2/>
     // 这个是根组件
     new Vue({
   
            el: '#app',
            data: {
   },
            // 在这里面定义局部组件---------------------------------------
            components: {
   
                // 键是组件名: 值是组件配置信息
                myCom2: {
   
                    template: "<h4>这是局部组件模板</h4>",
                    data(){
   
                        return {
   }
                    },
                    mathods: {
   },
                }
            }
        })



        //  这个是全局组件----------------------------------------------
        // myCom1 是定义的组件名
        Vue.component("myCom1",{
   
            template: "<h4>这是全局组件模板{
   { age }}</h4>",
            // 在根组件中data是对象, 在全局和局部中data是函数返回对象
            data() {
   
                return {
   
                    age: 20
                }
            },
            methods: {
   },
            filters: {
   },
        })

为什么使用组件

往往一个项目中的数据和功能都比较繁琐, 如果都写在跟组件内, 会显得非常臃肿, 不利于后期维护和调试

此时使用组件把一个项目拆分成多个模块, 每一个模块使用一个组件实现, 最终就可以实现代码的分离, 使结构更加清晰, 便于后期维护更新

如果一个项目有很多重复的模块, 比如轮播图导航条, 在多个页面中都要使用, 此时就可以把这个重复的功能模块封装到一个组件中,使用的时候直接调用组件就可以实现代码复用, 减少代码量, 简化项目

3. 组件的模板

组件的模板可以简单理解为写组件代码的地方

       // 跟组件是写在 div#app 中的
       <template id="myTem">
            // 而全局或者局部组件都是写在 template 下面的第一个标签元素内 
            <div>
                <button @click="count++">按钮{
   {
    count }}</button>
            </div>
            <!-- 组件模板中有且只能有一个根标签 不然就会报错 -->
            <!-- <div></div> -->
        </template>

 // 这种了解一下 不常用 
   <script type="text/html" id="">
        <div>


        </div>
    </script>

4. 组件特殊标签渲染 —> is属性

html中有些不合法的标签结构不能正常渲染, 比如:

p标签嵌套div

a标签嵌套a

按钮嵌套按钮

section嵌套section

        <table>
            <tr>tr可以正常渲染到table中</tr>

            // my-com 是我们定义的一个组件的名字  ---> myCom
            <my-com>组件不能渲染到table中, 因为组件不被table识别, 渲染时会被移出</my-com>

            // 通过 is 属性绑定, 可以解决这个问题
            // 就是把这个 tr 标签变成了我们的组件
            <tr is="my-com">table能识别tr,就直接写tr通过is属性把tr渲染为指定的组件, 即可把组件渲染到table中</tr>
        </table>

总结: is属性可以把原生h5标签渲染成指定组件, 以避免标签结构渲染异常

5. 动态组件

使用场景

当我们有多个组件时, 但是又不想一次性的全部显示, 而是有条件的显示

1. 使用 v-if 判断
1. 使用 is 属性

// 假设我们有三个 全局组件 想根据条件显示
Vue.component('mainCom', {
    template: '<h1>这是主页</h1>'});
Vue.component('loginCom', {
    template: '<h1>这是登录页</h1>'});
Vue.component