Vue3官网-深入组件（五）组件基础（$emit触发事件、在组件上绑定v-model双向数据绑定）、组件注册（组件名、全局注册、局部注册）

Vue3官网-深入组件（五）组件基础（$emit触发事件、在组件上绑定v-model双向数据绑定）、组件注册（组件名、全局注册、局部注册）

总结：

• 补充

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
  • truthy（真值）：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为 假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。括号内都是假值falsy。
  • .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
  • ==Event.preventDefault方法取消浏览器对当前事件的默认行为。==比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

• 组件基础

  • 基本

    • 组件是带有名称的可复用实例，在这个例子中是 <button-counter>。可以把这个组件作为一个根实例中的自定义元素来使用

      // 定义一个名为 button-counter 的新全局组件
      app.component('button-counter', {
        data() {
          return {
            count: 0
          }
        },
      --------------------------------------------------
      <div id="components-demo">
        <button-counter></button-counter>
      </div>
      

  • 通过 Prop 向子组件传递数据

    • Prop 是你可以在组件上注册的一些自定义 attribute
    • 我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，是非常有用的。

  • 监听子组件事件

    • 一些功能可能需要与父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

    • 父级组件可以像处理原生 DOM 事件一样通过 v-on 或 @ 监听子组件实例的任意事件

      <blog-post ... @enlarge-text="postFontSize += 0.1"></blog-post>
      

    • 同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：

      <button @click="$emit('enlargeText')">
        Enlarge text
      </button>
      

    • 使用事件抛出一个值

      • 使用 $emit 的第二个参数来提供这个值：

        <button @click="$emit('enlargeText', 0.1)">
          Enlarge text
        </button>
        

      • 然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

        <blog-post ... @enlarge-text="postFontSize += $event"></blog-post>
        

    • 在组件上使用v-model（表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定）

      • 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上

      • 在其 input 事件被触发时，将新的值通过自定义的 update:modelValue 事件抛出

      • app.component('custom-input', {
                    
          props: ['modelValue'],
          emits: ['update:modelValue'],
          template: `
            <input
              :value="modelValue"
              @input="$emit('update:modelValue', $event.target.value)"
            >
          `
        })
        -------------------------------------
        <custom-input v-model="searchText"></custom-input>
        

      • 在该组件中实现 v-model 的另一种方法是使用 computed property 的功能来定义 getter 和 setter。get 方法应返回 modelValue property，set 方法应该触发相应的事件。

  • 解析 DOM 模板时的注意事项

    • 元素放置限制：有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
    • 不区分大小写：HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写。这意味着当你在 DOM 模板中使用时，驼峰 prop 名称和 event 处理器参数需要使用它们的 kebab-cased (横线字符分隔) 等效值

• 组件注册

  • 组件名

    • 组件名就是 app.component 的第一个参数

      const app = Vue.createApp({
                ...})
      
      app.component('my-component-name', {
                
        /* ... */
      })
      

    • W3C规范

      • 全部小写
      • 包含连字符 (及：即有多个单词与连字符符号连接)

  • 全局注册

    • Vue.createApp({
                ...}).component('my-component-name', {
                
        // ... 选项 ...
      })
      

  • 局部注册

    • 局部注册的组件在其子组件中不可用

    • 全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

    • 通过一个普通的 JavaScript 对象来定义组件：

      const ComponentA = {
                
        /* ... */
      }
      const ComponentB = {
                
        /* ... */
      }
      const ComponentC = {
                
        /* ... */
      }
      -----------------------------------------------
      const app = Vue.createApp({
                
        components: {
                
          'component-a': ComponentA,
          'component-b': ComponentB
        }
      })
      

1. 组件基础

基本实例

这里有一个 Vue 组件的示例：

// 创建一个Vue 应用
const app = Vue.