跟着官方文档学习Vue3.x

最新推荐文章于 2022-08-22 15:47:17 发布
最新推荐文章于 2022-08-22 15:47:17 发布
阅读量340 收藏
点赞数
文章标签： javascript 前端 前端框架 vue

深入组件

Props

  1. Prop 类型

  2. 传入一个对象的所有property

    子组件的props部分怎么写？？？？？？？？
    请添加图片描述

  3. 单项数据流

    • 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data property 并将这个 prop 作为其初始值：

      props: ['initialCounter'],
data() {
  return {
    counter: this.initialCounter
  }
}

    • 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

      props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

      注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

  4. Props 验证

    为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

    app.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function(value) {
        // 力扣 – 中文网 助你高效提升编程技能 https://www.javascriptc.com/special/leetcode/
// 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    },
    // 具有默认值的函数
    propG: {
      type: Function,
      // 与对象或数组默认值不同，这不是一个工厂函数 —— 这是一个用作默认值的函数
      default: function() {
        return 'Default function'
      }
    }
  }
})

    注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。???

  5. Prop 的大小写命名（camelCase vs kebab-case）

    HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。

    重申一次，如果你使用字符串模板，那么这个限制就不存在了。

非 Prop 的Attribute
  • 一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute。常见的示例包括 class、style 和 id 属性。

  1. Attribute 继承

    当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中。同样的规则适用于事件监听器。

  2. 禁用 Attribute 继承

    如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。

    通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等)。

  3. 多个根节点上的 Attribute 继承

    与单个根节点组件不同，具有多个根节点的组件不具有自动 attribute 回退行为。如果未显式绑定 $attrs，将发出运行时警告。

    <custom-layout id="custom-layout" @click="changeValue"></custom-layout>

    // 力扣 – 中文网 助你高效提升编程技能 https://www.javascriptc.com/special/leetcode/
// 这将发出警告
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  `
})

// 没有警告，$attrs被传递到<main>元素
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})
自定义事件

  • 不同于组件和 prop，事件名不存在任何自动化的大小写转换（这里面指的是组件里面的组件名、prop和事件名）。触发的事件名需要完全匹配监听这个事件所用的名称（监听这个事件所用的名称指的是DOM模板中的事件名称）。如果我们触发一个 camelCase 名字的事件，则监听这个名字的 kebab-case 版本是不会有任何效果的。我的理解是触发的事件名如果是 this.$emit('myEvent') ，那么它不会转化成 this.$emit('my-event') ，而DOM模板中监听这个事件的名称若是 <my-component @my-event="doSomething"></my-component>， 那么这个事件触发是不会生效的。（html大小写不敏感，所有大写会被转化成小写）

    不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 @myEvent 将会变成 @myevent——导致 myEvent 不可能被监听到。

    因此，我们推荐你始终使用 kebab-case 的事件名。

  • 当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。

  • 与 prop 类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以验证它。

  • 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。

插槽
  1. 插槽内容
  • 字符串只是开始！插槽还可以包含任何模板代码，包括 HTML，或其他组件。
  • 如果 组件 的 template 中没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。
  1. 渲染作用域

  • 当你想在一个插槽中使用数据时，例如：

    <todo-button>
  Delete a {{ item.name }}
</todo-button>

    该插槽可以访问与模板其余部分相同的实例 property (即相同的“作用域”)。

  • 请添加图片描述

  • 插槽不能访问 <todo-button> 的作用域。例如，尝试访问 action 将不起作用：

  • <todo-button action="delete">
  Clicking here will {{ action }} an item
  <!-- `action` 未被定义，因为它的内容是传递*到* <todo-button>，而不是*在* <todo-button>里定义的。  -->
</todo-button>

  • 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

  • 我的理解是：自定义组件标签里面的内容不能像html元素标签一样直接渲染，它最终得借助slot插槽去显示。因此，直接在自定义组件标签里面访问父组件的property是可以的，但是不会被渲染。最终被渲染还需借助插槽。这样理解的话，插槽也算一种父子组件通信的方式了。

  •     <div id="app">
        <todo-button :item="item">
            <!-- 下面这句代码并不会被渲染 
                这也应证了如果 组件 的 template 中**没有**包含一个 `<slot>` 元素，
                    则该组件起始标签和结束标签之间的任何内容都会被抛弃。-->
            Delete a {{ item }}
        </todo-button>
        {{ item }}
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    item: 'First Item!'
                }
            }
        });
        app.component('TodoButton',{
            props: ['item'],
            template: `
                <div>
                    {{ item }}
                    <button class="btn-primary">Create a new item</button>
                </div>
            `
        })
        app.mount('#app');
    </script>

  •     <div id="app">
        父组件的模板：{{ item }}
        <todo-button>
            <!-- 此时可以显示item -->
            父组件下的子组件标签：{{ item }}
        </todo-button>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    item: 'First Item!'
                }
            }
        });
        app.component('TodoButton',{
            template: `
                <div>
                    <!-- 下面的item访问不到 -->
                    子组件的模板：{{ item }}
                    <slot></slot>
                    <button class="btn-primary">Create a new item</button>
                </div>
            `
        })
        app.mount('#app');
    </script>
  1. 后备内容
  • 有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
  1. 具名插槽
  • <slot> 元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽。在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。注意，v-slot 只能添加在 <template> 上 (只有一种例外情况)
  1. 作用域插槽

  • 有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

  • 要使 item 可用于父级提供的 slot 内容，我们可以添加一个 <slot> 元素并将其绑定为属性。绑定在 <slot > 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

  •     <div id="app">
        <todo-list>
            <!-- 将包含所有插槽 prop 的对象命名为 slotProps -->
            <template v-slot:default="slotProps">
                <i class="fas fa-check"></i>
                <span class="green"> {{ slotProps.item }} </span>
            </template>
        </todo-list>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            }
        });
        app.component('todo-list', {
            data() {
                return {
                    items: ['Feed a cat', 'Buy milk']
                }
            },
            template: `
                <ul>
                    <li v-for="(item,index) in items">
                        <slot :item="item"></slot>
                    </li>
                </ul>
            `
        });
        app.mount('#app')
    </script>

  •     <div id="app">
        <todo-list>
            <!-- 将包含所有插槽 prop 的对象命名为 slotProps -->
            <!-- my-slot 为 v-slot 指令的参数的参数名,此时改成default不会生效 -->
            <template v-slot:my-slot="slotProps">
                <i class="fas fa-check"></i>
                <span class="green"> {{ slotProps.item }} </span>
            </template>
        </todo-list>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            }
        });
        app.component('todo-list', {
            data() {
                return {
                    items: ['Feed a cat', 'Buy milk']
                }
            },
            template: `
                <ul>
                    <li v-for="(item,index) in items">
                        <slot name="my-slot" :item="item"></slot>
                    </li>
                </ul>
            `
        });
        app.mount('#app')
    </script>
  1. 独占默认插槽的缩写语法

  • 在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。

  • 注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确。

  •     <div id="app">
        <todo-list>
            <template v-slot:default="slotProps">
                <i class="fas fa-check"></i>
                <span class="green"> default slot: {{ slotProps.item }} </span>
            </template>
            <template v-slot:other="slotProps">
                <i class="fas fa-check"></i>
                <span class="green"> other slot: {{ slotProps.item }} </span>
            </template>    
        </todo-list>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            }
        });
        app.component('todo-list', {
            data() {
                return {
                    items: ['Feed a cat', 'Buy milk']
                }
            },
            template: `
                <ul>
                    <li v-for="(item,index) in items">
                        <slot name="default" :item="item"></slot>
                        <slot name="other" :item="item"></slot>
                    </li>
                </ul>
            `
        });
        app.mount('#app')
    </script>

  1. 解构插槽 Prop

    作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

    function (slotProps) {
  // ... 插槽内容 ...
}

    这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。你也可以使用 ES2015 (opens new window)解构来传入具体的插槽 prop。

     <div id="app">
        <!-- v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式 -->
        <todo-list v-slot:default="{ item }">
                <i class="fas fa-check"></i>
                <span class="green"> {{ item }} </span>
        </todo-list>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            }
        });
        app.component('todo-list', {
            data() {
                return {
                    items: ['Feed a cat', 'Buy milk']
                }
            },
            template: `
                <ul>
                    <li v-for="(item,index) in items">
                        <slot name="default" :item="item"></slot>
                    </li>
                </ul>
            `
        });
        app.mount('#app')
    </script>

    这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 item 重命名为 todo：

        <div id="app">
        <!-- v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式 -->
        <todo-list v-slot:default="{ item: todo }">
                <i class="fas fa-check"></i>
                <span class="green"> {{ todo }} </span>
        </todo-list>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            }
        });
        app.component('todo-list', {
            data() {
                return {
                    items: ['Feed a cat', 'Buy milk']
                }
            },
            template: `
                <ul>
                    <li v-for="(item,index) in items">
                        <slot name="default" :item="item"></slot>
                    </li>
                </ul>
            `
        });
        app.mount('#app')
    </script>

    你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：

        <div id="app">
        <!-- v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式 -->
        <todo-list v-slot:default="{ item = 'Placeholder' }">
                <i class="fas fa-check"></i>
                <span class="green"> {{ item }} </span>
        </todo-list>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {}
            }
        });
        app.component('todo-list', {
            data() {
                return {
                    items: ['Feed a cat', 'Buy milk']
                }
            },
            template: `
                <ul>
                    <li v-for="(item,index) in items">
                        <slot name="default" :item="item"></slot>
                    </li>
                </ul>
            `
        });
        app.mount('#app')

  2. 动态插槽名 ？？？？

  3. 具名插槽的缩写

    跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。

    然而，和其它指令一样，该缩写只在其有参数的时候才可用。

        <div id="app">
        <base-layout>
            <template v-slot:header>
                <h1>Here might be a page title</h1>
            </template>
            <template #default>
                <h1>A paragraph for the main content.</h1>
            </template>
            <template #footer>
                <h1>Here's some contact info.</h1>
            </template>
        </base-layout>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {

                }
            }
        });
        app.component('BaseLayout',{
            template: `
                <div>
                    <slot name="header"></slot>
                    <slot ></slot>
                    <slot name="footer"></slot>
                </div>
            `
        })
        app.mount('#app')

今日疑惑 2022/7/29

Vue 中的 模板 是什么含义？

字符串模板 与 DOM 模板各自是什么含义？区别是什么？

解构插槽 Prop 源码？

import 与 require 的区别？ export、export default 与 exports、module.exports 的区别？

动态插槽名 的用法？

非 Prop 的 Attribute 能在父子组件中传值吗？

组件实例能直接在模板中暴露的内容有哪些？props、emits、data?

Anbelin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue3.0全新文档快速上手学习内容整理
总结前端开发中遇到的问题，分享前端知识
05-08 1万+
vue3.0版本文档总结
vue3.x中使用cesium，vue3.x+Cesium
05-04
在vue3.x版本中使用cesium，基于vue-cli创建项目，手动配置webpack，资源已配置好，下载完 进入项目下npm install 安装依赖后就可以运行了
Vue3.x开发文档
qq1161839630的博客
03-22 587
Vue3.x开发文档 1 特点 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 易用 已经知道HTML/CSS/JavaScript即可使用。 灵活 可以在一个库和一个完整框架之间自由使用。 高效 运行大小20KB,超快虚拟DOM,最省心的优化 2 Vue3.x VS Vue2.x 主要改进 2.1 提升运行时性能：
Vue3.x基础
DuCheng_的博客
08-03 475
Vue是一种**MVVM模式**（Model-View-ViewModel）的前端框架，**Model（模型）**可以理解为数据，**View（视图）**可以理解为HTML页面，**ViewModel（视图模型）**即业务逻辑（或类似于方法），Vue就是用MVVM实现的数据双向绑定，即Model层与View层均与ViewModel层互相关联，而Model层与View层没有直接联系，是一种**低耦合、可重用、易测试**的模式。...
【Vue3】 1.5 Vue3的官方文档（思路）
SPYY的专栏
07-07 1314
Vue3 看官网的一些体会
Vue3中文官方文档
热门推荐
liuhao9999的博客
03-26 1万+
https://v3.cn.vuejs.org/
02.Vue3.x语法.md
09-07
02.Vue3.x语法.md
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
此教程包括：Vue3.x环境搭建、Vue/cli脚手架使用、Vite脚手架使用、Vue目录结构 核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch...
基于Vue3.X的Vue-Cropper封面上传裁剪实例
10-29
由于官方Vue-Cropper提供的实例都是第V2.x的，自己整理了一份以备忘！ 注意，提交有两个按钮，选base64按钮获取的不上传到服务器，直接返回客户端base64图片，选bobo则需要自己写服务端接口，并返回图片地址。
Vue2.X和Vue3.0数据响应原理变化的区别
10-16
主要介绍了Vue2.X和Vue3.0数据响应原理变化的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue2教程详解七（Vuex3）
一只努力搬砖的打工妹纸
03-17 2457
简介 Vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 该状态自管理应用包含以下几个部分： state，驱动应用的数据源； view，以声明方式将state映射到视图； actions，响应在view上的用户输入导致的状态变化。 以上，就是一个表示“单向数据流”理念的简单示意，但是当我们的应用遇到多个组件共享状态时，单项数据流的简洁性就会很容易被破坏： 多个视图依赖于同一状态。 来自不同视
Vue 3.x 中文api文档
灬Manong 博客
10-28 3084
点击传送门 Vue 3.x 传送门 … … Go
Vue 3 开发文档
LGD_Sunday的专栏
07-28 8532
本博客会长期更新（在 Vue 的中文官方文档没有发布前）。 博客的边界：本博客只会带来 Vue 3 新增内容的整理文档（经过验证的） 重点内容： Vite Composition API 新的响应式机制 计算属性和侦听器 利用 vite 创建下一代的 Vue 项目 两个重要的点： Vue CLI v4.5 之上的版本 Vite Vue CLI 想要构建 Vue 3.x 项目，那么需要使用 Vue CLI v4.5 之上的版本 yarn global add @vue/cli@next # or
Vue CLI 3 中文文档
weixin_34260991的博客
02-10 1217
翻译文档 文档翻译全貌 前言 之前写了一篇Vue CLI 3.x 版本的简单体验，当时文档还不全，具体的使用方法并不是很清楚，大概是2月7号，收到Vue CLI 3接近Beta版的提示，作者尤雨溪也讲下周会出文档，没想到昨天已经出来了。本着对新功能的好奇心，花了一晚上浏览并翻译了一下文档。 如今最大的变化在配置方面，变成了一种独立配置文件...
Vue 3.x 介绍
qq_32090185的博客
08-22 449
Vue 3.x 介绍
vue3.x 创建一个项目
hlvy
10-30 8485
vue create 运行以下命令来创建一个新项目： vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 Git Bash，交互提示符并不工作。你必须通过 winpty vue.cmd create hello-world 启动这个命令。 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint ...
vue3最新文档学习
Helsonlin
02-22 857
vue3最新文档 支持多根节点 子组件 // Card.vue <template> <div class="header">{{header}}</div> <div class="footer">{{footer}}</div> </template> <script setup lang="ts"> const props = defineProps({ header: { type:
Vue 3 中文文档来啦！
实验楼
04-02 857
点击蓝字 关注我们内容转载于掘金，作者 LBJ我们知道 Vue 3 新文档 ( vuejs.org ) 已经发布一段时间了，但那是英文版的，不知道你看了没？没有看，那就有福了！中文版翻译要来了！为什么说它要来了呢？一是，原 Vue 3 中文文档 ( v3.cn.vuejs.org ) 尤大已经标注：旧版二是，新文档vuejs.org 对应的中文版翻译已经将 英文版中稳定...
Vue CLI 3搭建vue+vuex 最全分析
weixin_34228662的博客
09-14 710
2019独角兽企业重金招聘Python工程师标准>>> ...
vue3.x+typescript实践指南下载
最新发布
10-18
2. 官方文档或资源库：前往Vue 3.x的官方网站，查找他们的文档或资源库，看看是否提供了该指南的下载选项。官方提供的文档通常是最准确和权威的来源。 3. 开发者社区：参与Vue和TypeScript的开发者社区，例如在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值