Vue3.x -- 组件 · Vue&&TypeSprict--基础总结

>[success] # 组件 ~~~ ~~~ >[info] ## 全局和局部组件 ~~~ 1.组件的注册方式有两种一种是全局组价，一种是局部组件 1.1.全局组件'vue3.x' 中注册方法是'app.component',这种形式的 '弊端':是使用打包工具例如'webpack',将会将所有的全局组件都构建在一起，即使你不使用这个组件他也将会构建在结果中。 '好处'：抛开你渲染的dom来说不限制使用的位置 1.2.局部组件是有'components' 注册方法在组件的'components' 字段添加注册组件，它的优缺点和全局组件正好相反 ~~~ >[info] ## Prop ~~~ 1.关于prop 依旧和之前一样是一个父传子的过程 ~~~ >[danger] ##### 记录一下小的概念 ~~~ 1.prop 传入一个静态的值: <blog-post title="My journey with Vue"></blog-post> 2.传入动态值配合v-bind <blog-post :title="post.title"></blog-post> 3.没有传值默认为true <blog-post is-published></blog-post> 4.传入一组值 post: { id: 1, title: 'My Journey with Vue' } <blog-post v-bind="post"></blog-post> 等价于： <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post> ~~~ >[info] ## 关于非 Prop 的 Attribute ~~~ 1.一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。 ~~~ >[danger] ##### 没有定义的属性作用的位置 ~~~ 1.这些没有定义的属性都将作用在根节点上，下面案例中子组件并没有在props属性定义' data-status'，因此最后渲染时候在根节点上 ~~~ * 子组件定义 ~~~ app.component('date-picker', { template: ` <div class="date-picker"> <input type="datetime" /> </div> ` }) ~~~ * 使用 ~~~ <date-picker data-status="activated"></date-picker> ~~~ * 渲染效果 ~~~  <div class="date-picker" data-status="activated"> <input type="datetime" /> </div> ~~~ >[danger] ##### 当然如果想只使用定义的属性 ~~~ 1.想让没有定义的属性不渲染在根节点需要配置'inheritAttrs: false',默认该配置为'true' 因此会出现没有定义作用在根节点上 ~~~ >[danger] ##### 没有定义的事件 ~~~ 1.同样在子组件没用定义$emits 中的事件将作用在根节点上 ~~~ >[danger] ##### 这个系列的改动 [链接](https://www.kancloud.cn/cyyspring/vuejs/2165362) [$attrs 包括 class & style ](https://www.kancloud.cn/cyyspring/vuejs/2165526) >[info] ## $emits 改动 [看这里](https://www.kancloud.cn/cyyspring/vuejs/2166242) >[info] ## v-model 改动 [看这里](https://www.kancloud.cn/cyyspring/vuejs/2169775) >[info] ## 动态组件is 用法改动 [看这里](https://www.kancloud.cn/cyyspring/vuejs/2166031) >[info] ## 插槽 [插槽需要经常复习](https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9)