Vue笔记(三)深入组件

组件注册

组件注册有两种方式:

  1. 全局注册
    可以使用Vue应用实例的.component()方法,让组件在当前Vue应用中全局可用,.component()方法可以被链式调用。全局注册的组件可以在此应用的任意组件的模版中使用。
    import { createApp } from 'vue'
    import { MyComponent } from './MyComponent.vue'
    
    const app = createApp({
    })
    app.component('MyComponent',MyComponent)
    
    
  2. 局部注册
    局部注册的组件需要在它的父组件中显示导入,并且只能在父组件中使用,依赖关系更加明确。
    <script>
    import MyComponent from './MyComponent'
    
    export default{
        components:{
            MyComponent
        }
    }
    </script>
    
    <template>
        <MyComponent />
    </template>s
    

Props

一个组件需要显示声明它所接受的props。声明props的方式有两种:

  1. 字符串数组
    export default{
        props:['animal','zoo'],
        created(){
            //props 会暴露到 this 上
            console.log(this.animal);
            console.log(this.zoo);
        }
    }
    
  2. 对象的形式
    export default{
        props:{
            title:string,
            age:number
        }
    }
    

静态Prop、动态Prop

  1. 静态Prop传参形式
    <child-component title="this is title" />
    
  2. 动态Prop传参形式,使用v-bind或缩写:来进行动态绑定
    <child-component :title="自定义的变量"/>
    

事件

触发与监听事件

  1. 触发(子组件):在组件模版表达式中,可以直接使用$emit方法触发自定义事件
    //1. 第一种触发方式
    <button @click="$emit('click')">触发click事件</button>
    //2. 第二种触发方式,函数触发, this.$emit
    export default{
        methods:{
            submit(){
                this.$emit('click');
            }
        }
    }
    
  2. 父组件可以通过v-on@来监听事件
    //1. 触发
    <child-component @click="alert(1)" />
    //2. 事件监听器也支持 .once 修饰符
    <child-component @click.once="alert(1)" />
    

事件参数
可以给触发的事件传入参数,父组件可以处理传入的参数

  1. 子组件传入参数
    <button @click="emit('click',1,2)">传入参数给父组件</button>
    
  2. 父组件处理参数
    <child-component @click="fun1"/>
    
    //处理参数的方法
    methods:{
        fun1:function(var1,var2){
            console.log(var1);
            console.log(var2);
        }
    }
    

插槽 Slots

  1. 父组件传入,插槽内容可以是任意合法的模版内容,不局限于文本,可以传入多个HTML元素,甚至组件
    <child-component>
        传入内容
    </child-component>
    
  2. 子组件插槽占位
    <h1>
        <slot></slot>
    </h1>
    

插槽渲染作用域
插槽可以访问到父组件的数据作用域,因为插槽内容本身是在父组件中定义的。插槽无法访问子组件的数据。

插槽默认内容
如果父组件没有提供任何内容,可以为插槽指定默认内容

<button>
    <slot>默认内容</slot>
</button>

具名插槽

  1. 子组件为插槽指定名称,没有提供name<slot>会隐式地命名为default
    <div>
        <slot name="header"></slot>
        <slot name="footer"></slot>
        <slot></slot>
    </div>
    
    
  2. 父组件指定插槽名称传入内容,v-slot简写#
    <child-component>
        <template #header>
            This is header
        </template>
        <template #footer>
            This is footer
        </template>
        <template #default>
            This is default
        </template>
    </child-component>
    

动态插槽名
可以使用动态的插槽名,传给子组件内容

<child-component>
    <template v-slot:[defineSlotName]>
    </template>
    
    <template #[defineSlotName]>
    </template>
</child-component>

作用域插槽
某些场景下插槽的内容想要同时使用父组件域内和子组件域内的数据,子组件可以在渲染时将一部份数据提供给插槽

  1. 默认插槽
    //子组件插槽插入数据
    <div>
        <slot :name="zqq" :age="18">
        </slot>
    </div>
    //父组件使用
    <child-component v-slot="vslot">
        {{ vsolt.name }} {{ vsolt.age }}
    </child-component>
    
  2. 具名作用域插槽
    //子组件插槽传入数据,name是vue特别保留的attribute,不会作为props传递给插槽
    <slot name="header" message="hello">
    </slot>
    //父组件使用
    <child-component>
        <template #header="data">
            {{ data s}}
        </template>
    </child-component>
    

依赖注入

一个父组件相当于其所有的后代组件,会作为依赖提供者。任何后代的组件树,无论层级多深,都可以注入由父组件提供给整条链路的依赖。关键字:provideinject

  1. provide(提供),为后代组件提供数据
    //为后代组件提供数据
    export default{
        privode:
        {
            message:'hello'
        }
    }
    //为后代组件提供data()定义的数据属性,以函数形式使用provide
    export default{
        data(){
            return{
                message:'hello'
            }
        },
        provide:(){
            return{
                message:this.message;
            }
        }
    }
    
    //在应用层为全部组件提供依赖
    import { createApp } from 'vue'
    
    const app = createApp({})
    // message是注入的名称,hello是值
    app.provide('message','hello');
    
  2. Inject(注入),子组件注入父组件(隔代父组件也可以)提供的依赖
    export default{
        inject:['message'],
        data(){
            return{
                //注入会在组件自身状态之前被解析,可以通过this访问注入的值
                localMessage:this.message
            }
        }
    }
    

注入别名和默认值

export{
    inject:{
        // localMessage是自定义的本地别名,后续访问注入的内容,使用this.localMessage
        localMessage:{
            from:'message',
            default:'default' //可以指定默认值
        }
    }
}

和响应式数据配合使用
为了保证注入方和供给方之间的响应性链接,需要使用computed()函数提供一个计算属性

import default{
    data(){
        return{
            message:'hello'
        }
    }
    provide(){
        return{
            message:computed(() => this.message)
        }
    }
    }
}

异步组件

在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件,Vue提供了defineAsyncComponent方法来实现

const AsyncComp = defineAsynComponet(() => {
    return new Promise(() =>{
        //...从服务器获取组件
        resolve(/*获取到的组件*/);
    })
})

导入Vue单文件组件

import { defineAsyncComponent } from 'vue'

const AsyncComp defineAsyncComponent(() => import('./components/MyComponent.vue'))

最后得到的AsyncComp是一个外层包装过的组件,仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将受到的props和插槽传给内部组件,所以可以使用这个异步的包装组件无缝地替换原始组件,同时实现延迟加载。

异步组件注册

  1. 全局注册
    app.component('MyComponent',defineAsyncComponent(() => import('./components/MyComponent.vue'))
    
  2. 局部注册
    <script>
    impoty { defineAsyncComponent } from 'vue'
    
    export default{
        components{
            MyComponent:defineAsyncComponent(() = import('./components/MyComponent.vue'))
        }
    }
    </script>
    

加载与错误状态

const AsyncComp = defineAsyncComponent({
    //加载组件函数
    loader:() => import(',MyComponent'),
    //展示加载组件的延迟时间,默认200ms
    delay:200,
    //加载失败后展示的组件
    errorComponent:ErrorComponent,
    //加载组件超时时间,默认没有超时时间,如果超市,会显示 加载失败展示的组件
    timeOut: 3000
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 狂神说Vue是由中国前端开发者尤雨溪开发的一款流行的JavaScript框架。Vue具有简洁的语法、高效的性能和灵活的组件化开发模式,因此在前端开发领域得到了广泛的应用和认可。 在《狂神说Vue笔记》这篇文章中,作者整理了对于Vue框架的学习和实践经验,旨在帮助读者更好地理解和运用Vue。文章首先介绍了Vue框架的基本概念和特点,如Vue实例、生命周期、模板语法等。然后详细讲解了Vue的核心功能和常用的基础知识,例如数据绑定、计算属性、事件处理等。接着,文章还介绍了Vue的路由、状态管理和组件化开发等进阶知识,以及常见的一些Vue插件和工具的使用。 文章的写作风格简洁明了,重点突出,对于每个知识点都给予了清晰的解释和实际示例。同时,狂神还根据自己的实际经验提供了一些实战技巧和开发中常见的问题解决方法。这些经验分享不仅有助于初学者快速上手,也为有一定经验的开发者提供了一些新的思路和技巧。 总之,《狂神说Vue笔记》是一篇值得阅读的文章,无论是对Vue框架感兴趣的初学者,还是对于Vue有一定了解的开发者,都可以从中获得一些有益的知识和经验。通过学习这些笔记,读者可以更加深入地了解Vue框架的使用和原理,提升自己的前端开发能力。 ### 回答2: 《狂神说Vue笔记.md》是一份关于Vue框架的学习笔记,由狂神团队撰写而成。这份笔记详细地介绍了Vue的基本概念、核心特性和使用方法。一共包含了20个章节,内容全面且系统。 笔记的第一章主要介绍了Vue的基本概念,包括Vue实例、生命周期、指令等。第二章到第五章则讲解了Vue的模板语法、计算属性、侦听器、样式绑定等。通过学习这些章节,读者可以对Vue的基本语法和使用方式有一个清晰的认识。 接下来的几章介绍了Vue组件化开发,包括组件的定义、组件之间的通信、插槽等。这些章节详细地介绍了Vue组件的相关概念和使用方法,使读者能够灵活地进行组件化开发。 笔记的后半部分则围绕Vue的高级特性展开,如路由、状态管理、动画等。这些章节深入探讨了Vue的高级用法和扩展性,对于希望进一步深入学习的读者来说非常有帮助。 总的来说,《狂神说Vue笔记.md》是一份非常全面、详细的Vue学习资料。通过学习这份笔记,读者可以系统地掌握Vue框架的基本概念和核心特性,同时也能够了解到一些高级用法和扩展性。这份笔记适合初学者入门,也适合有一定经验的开发者进阶学习。读者可以通过实践和不断深入学习,更好地掌握和应用Vue框架。 ### 回答3: 《狂神说Vue笔记》是一本非常有价值的学习资料。该书以清晰、简明的语言介绍了Vue.js框架的核心概念和使用方法,适合任何想要深入学习Vue.js的开发者。 首先,该书从Vue.js的基本概念开始讲解,包括Vue实例、模板语法和组件等。通过实例代码和说明,读者可以直观地了解Vue.js的基本用法和原理。 其次,该书详细介绍了Vue.js的高级特性,例如Vue组件的通信方式、Vue路由和状态管理等。这些特性是Vue.js框架优势的体现,通过学习这些内容,读者可以更好地运用Vue.js开发复杂的应用程序。 此外,该书还涵盖了Vue.js框架的生态系统,介绍了Vue.js周边的工具和库,例如Vue CLI和Vue Router等。这些工具和库可以帮助开发者更高效地进行Vue.js项目开发,提高开发效率。 总之,通过《狂神说Vue笔记》,读者可以系统地学习和掌握Vue.js框架的核心概念和使用方法。该书内容丰富,重点明确,适合初学者和有一定经验的开发者阅读。无论是想要进一步学习Vue.js还是应用Vue.js进行项目开发,这本书都是不可或缺的参考资料。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值