vue3学习随便记8-属性、事件、插槽、动态组件

sjg20010414

已于 2023-06-21 16:42:08 修改

阅读量676

点赞数

文章标签： vue.js 前端 javascript

于 2021-11-24 17:01:55 首次发布

本文链接：https://blog.csdn.net/sjg20010414/article/details/121495898

版权

组件基础

我们其实前面已经看过很多组件的例子，都是用 app.component(...) 注册一个全局组件，组件的“视图”是直接用 template 定义的字符串模板。这样的组件主要用来举例和学习原理，实际工程中通常会使用单文件组件，即一个组件是单个文件定义的（在编译构建系统中常常是 .vue 文件）。

组件是自定义元素，可以像元素一样复用，复用时，每个组件都是新的实例，它的属性方法都是它自己的。

组件通常可以嵌套组织成树状。

模板中要使用组件，必须先注册。注册分为全局注册和局部注册。我们用 app.component(...) 注册的都是全局注册，全局注册的组件可以在应用中的任何组件的模板中使用。用 app.component(...) 方法注册的组件是全局组件，但创建app时在其配置 components 中定义的组件是 app 的组件，却不是全局组件（属于局部注册），因为组件在其子组件中不可用。

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

上面的代码中，可以在app中使用 ComponentA 和 ComponentB，但不能在 ComponetB 中使用 ComponentA，如果希望 ComponentB 可以使用 ComponentA，必须明确声明

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}

通过 prop （属性）向子组件传递数据

组件的 prop 就是组件中自定义的 attribute，它是组件向外暴露的通信接口，是外部向子组件传递数据的方式。组件 prop 就是在组件配置对象的配置项 props: [...] 中定义，在组件模板中使用，然后外部像寻常的 attribute 一样绑定数据。

<html>

<head>
    <script src="vue.global.js"></script>
</head>

<body>
    <div id="app">
        <blog-post v-for="post in posts" :key="post.id" :title="post.title"></blog-post>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    posts: [
                        {id:1, title:'Vue3 之旅'},
                        {id:2, title:'Vue3 博客'},
                        {id:3, title:'Vue3 学习之趣'}
                    ]
                }
            }
        })
        app.component('blog-post', {
            props: ['title'],
            template: `<h4>{{ title }}</h4>`
        })
        const vm = app.mount('#app')
    </script>
</body>

</html>

监听子组件事件

子组件是自定义的元素，除了可以用 props 扩展属性（attribute），还可以用 emits 扩展事件。我们为 blog-post 组件扩展 enlarge-text事件（在该事件触发后放大所有博文的字号）：先给app添加一个属性变量表示博文的字号

            data() {
                return {
                    posts: [
                       /* ... */
                    ],
                    postFontSize: 1
                }
            }

然后模板中用该变量控制博文的字号，触发 blog-post 的 enlarge-text 事件时，增加该变量的值

    <div id="app">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" :key="post.id" 
                :title="post.title" @enlarge-text="postFontSize += 0.1">
            </blog-post>
        </div>
    </div>

我们来修改 blog-post 组件，它应该向外暴露 enlarge-text 事件，同时，扩展的事件 enlarge-text 不会自动能触发，它要么手动用代码去触发，要么转嫁到组件已有的 HTML 事件上，在 HTML事件中用代码去触发。我们修改组件模板，给组件添加一个按钮，在该按钮的 click 事件中用代码去触发 enlarge-text事件。（在JS代码中，使用camelCased驼峰写法，如大驼峰的组件名BlogPost，小驼峰的变量 enlargeText，在HTML中，使用kebab-case短横分隔写法，如blog-post，enlarge-text ）

        app.component('blog-post', {
            props: ['title'],
            emits: ['enlargeText'],
            template: `
                <div class="blog-post">
                    <h4>{{ title }}</h4>
                    <button @click="$emit('enlargeText')">放大文本</button>
                </div>
            `
        })

上面的代码中，我们放大文本的步进量是使用组件的一方决定的，如果我们希望这个步进是组件自身决定的，那么我们在用vm的API方法$emit触发enlargeText事件时，可以同时抛出一个值，然后让使用方使用这个值。

<button @click="$emit('enlargeText', 0.1)">放大文本</button>

使用方可以通过 $event 参数访问到抛出的值

            <blog-post v-for="post in posts" :key="post.id" 
                :title="post.title" @enlarge-text="postFontSize += $event">
            </blog-post>

如果事件处理函数是一个方法，那么抛出的值会成为该方法的第一个参数

    <div id="app">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" :key="post.id" 
                :title="post.title" @enlarge-text="onEnlargeText">
            </blog-post>
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    posts: [
                        /* ... */
                    ],
                    postFontSize: 1
                }
            },
            methods: {
                onEnlargeText(amount) {
                    this.postFontSize += amount
                }
            }
        })
        app.component('blog-post', {
            /* ... */
        })
        const vm = app.mount('#app')
    </script>

组件作为自定义的元素，也可以是自定义的输入元素，从而可以使用 v-model。首先我们要来了解 v-model 双向绑定的含义：值绑定到vm变量，input事件处理中把vm变量设置为输入元素的值

<input v-model="searchText" />

上述代码等价于

<input :value="searchText" @input="searchText = $event.target.value" />

当在自定义的组件custom-input上使用 v-model 时，

<custom-input v-model="searchText"></custom-input>

等价于

<custom-input :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

上面的代码意味着，自定义元素（组件）必须向外暴露一个名为 modelValue 的 prop（属性），因为这是一个输入元素，所以，组件内部的 input 元素的 value 属性（attribute）应该绑定到 modelValue 属性上。自定义元素（组件）必须向外暴露一个名为 update:modelValue 的事件，组件内部 input 的 input 事件中，用vm API方法 $emit(...) 发射 update:modelValue 事件。即组件应定义如下

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

我们观察模板部分，value值绑定和 input事件，这本就是 v-model 的含义，我们可以换一种方式，使用计算属性及其 getter/setter 来定义组件

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { 
        this.$emit('update:modelValue', value)
      }
    }
  }
})

通常计算属性是getter，对上述组件的 getter，动作路径是：使用者视图输入-> modelValue -> 内部 value，而内部value变化影响到使用者视图输入框则是 setter，动作路径是：内部value -> modelValue -> 使用者视图输入

通过slot插槽分发内容

props 是组件这个自定义元素的属性，它是变量的概念，我们有时候希望和HTML元素一样，把自定义元素的内容（元素的innerHTML）从外部传递到组件内部，这是静态内容概念。实现内容从外到内的传递，可以使用 slot插槽，即 innerHTML ---> <slot></slot>。

我们给前面的blog-post组件插入slot，用来存放正文内容

    <div id="app">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" :key="post.id" 
                :title="post.title" @enlarge-text="onEnlargeText">
                <div>{{ post.body }}</div>
            </blog-post>
        </div>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    posts: [
                        {id:1, title:'Vue3 之旅', body: 'Vue3 之旅正文'},
                        {id:2, title:'Vue3 博客', body: 'Vue3 博客开启新篇章'},
                        {id:3, title:'Vue3 学习之趣', body: 'Vue3 学习之趣无穷无尽'}
                    ],
                    postFontSize: 1
                }
            },
            methods: {
                onEnlargeText(amount) {
                    this.postFontSize += amount
                }
            }
        })
        app.component('blog-post', {
            props: ['title'],
            emits: ['enlargeText'],
            template: `
                <div class="blog-post">
                    <h4>{{ title }}</h4>
                    <slot></slot>
                    <button @click="$emit('enlargeText', 0.1)">放大文本</button>
                </div>
            `
        })
        const vm = app.mount('#app')
    </script>

红色部分是 slot 分发的内容

动态组件

所谓动态组件，就是一个组件容器，可以动态确定要渲染的具体组件，一般用 :is 属性指定组件名（或者一个组件的选项对象，即组件的完整配置）。下面的例子，根据用按钮选择的当前的tab名称，动态渲染对应组件

    <div id="app">
        <button v-for="tab in tabs" :key="tab.name"
            :class="['tab-button', {active: currentTab === tab.name}]"
            @click="currentTab = tab.name">
            {{ tab.text }}
        </button>
        <component :is="currentTabComponent" class="tab"></component>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    currentTab: 'Home',
                    tabs: [
                        {name:'Home', text:'首页'},
                        {name:'Posts', text:'帖子'},
                        {name:'Archive', text:'归档'}
                    ]
                }
            },
            computed: {
                currentTabComponent() {
                    return 'tab-' + this.currentTab.toLowerCase()
                }
            }
        })
        app.component('tab-home', {
            template: `<div class="demo-post">首页内容</div>`
        })
        app.component('tab-posts', {
            template: `<div class="demo-post">帖子……</div>`
        })
        app.component('tab-archive', {
            template: `<div class="demo-post">（归档）</div>`
        })
        const vm = app.mount('#app')
    </script>

Vue解析DOM模板的注意事项

如果想在 DOM 中直接书写 Vue 模板， Vue 就不得不从 DOM 中获取字符串，这时，会因为原生 HTML的解析行为带来一些小问题。这句话的意思是，我们在以下情况使用组件时，组件都是一个独立的整体：

注册组件时使用字符串模板（例如 template: `...`）
使用单文件组件
使用 <script type="text/x-template">定义的组件

Vue 解析模板没有问题。而原生的 HTML DOM 和 Vue模板混在一起， Vue解析时势必要从混合物中捞出Vue模板，这样，Vue模板必须迁就原生HTML的一些特性。哪些特性呢？

元素位置受限

<table>
  <blog-post-row></blog-post-row>
</table>

<table>内部允许的元素是有限制的，这样，上述代码中的<blog-post-row>会被认为是无效的内容提升到外部，导致渲染结果是错误的。这种情况，可以使用 is 属性来变通：

<table>
  <tr is="vue:blog-post-row"></tr>
</table>

这里is的值必须用 vue: 开头，表示这个不是HTML原生的自定义元素，而是Vue组件。

和这个例子类似的元素还有 <ul>、<ol>、<select>，而 <li>、<tr>、<option>只能出现在特定元素内部。

大小写不敏感

HTML 属性名不区分大小写的，从而浏览器将所有大写字母解释为小写，这个问题带来的一点就是JS代码中组件名称之类的是有大小写驼峰写法，驼峰写法的组件名不能直接在HTML中使用（TabA组件和taba组件会被认为是相同组件），解决办法我们前面已经看到过了，就是HTML中用驼峰写法等价的kebab-cased（短横分隔）写法（TabA对应tab-a）

sjg20010414

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3学习随便记8-属性、事件、插槽、动态组件

组件基础我们其实前面已经看过很多组件的例子，都是用 app.component(...) 注册一个全局组件，组件的“视图”是直接用 template 定义的字符串模板。这样的组件主要用来举例和学习原理，实际工程中通常会使用单文件组件，即一个组件是单个文件定义的（在编译构建系统中常常是 .vue 文件）。组件是自定义元素，可以像元素一样复用，复用时，每个组件都是新的实例，它的属性方法都是它自己的。组件通常可以嵌套组织成树状。模板中要使用组件，必须先注册。注册分为全局注册和局部注册。我们用 ap
复制链接

扫一扫