Vue-组件基础

傷城~ 2022-04-23 06:54 216阅读 0赞

### 一、基本示例  ###

注意组件要在vue实例挂载之前定义加载

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    
    <div id="components-demo">
      <button-counter></button-counter>
    </div>
    
    <script>
      /*
      * 定义一个新的组件，名称为 button-counter
      * 组件的 data 选项必须是一个函数
      * */
      Vue.component('button-counter', {
        data: function () {
          return {
            count: 0
          }
        },
        template: '<button v-on:click="count++">你点击了 {
       { count }} 次。</button>'
      })
    
      new Vue({ el: '#components-demo' })
    </script>

想要在模板中使用这些组件，就必须先进行注册，以便 Vue 能够找到它们。组件注册有两种方式：**全局注册**和**局部注册**。到目前为止，我们只通过 `Vue.component` 在全局注册组件：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>Vue.component('my-component-name', {
  // ... options ...
})
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

全局方式注册的组件，可以用于之后创建的所有（通过 `new Vue` 创建的）Vue 根实例，以及 Vue 实例组件树中所有子组件的内部。

### 二、使用props向子组件传递数据 ###

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="components-demo">
      
      <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:title="post.title"
      ></blog-post>
    </div>
    
    <script>
      /*
      * props 是指注册在组件选项上的自定义属性。当一个值，被放置在 props 中，作为其中一个 prop，这个值就会成为组件实例上，
    一个可访问的属性。
      * */
      Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>{
       { title }}</h3>'
      })
    
      new Vue({
        el: '#components-demo',
        data: {
          posts: [
            { id: 1, title: '我的 Vue 旅程' },
            { id: 2, title: '用 Vue 写博客' },
            { id: 3, title: 'Vue 如此有趣' }
          ]
        }
    
      })
    </script>

### 三、单个根元素  ###

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="components-demo">
      
      <blog-post
        v-for="post in posts"
        v-bind:key="post.id"
        v-bind:post="post"
      ></blog-post>
    </div>
    
    <script>
      /*
      * (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内
      * */
      Vue.component('blog-post', {
        props: ['post'],
        template: `
        <div class="blog-post">
          <h3>{
       { post.title }}</h3>
          <div v-html="post.content"></div>
        </div>
      `
      })
    
      new Vue({
        el: '#components-demo',
        data: {
          posts: [
            { id: 1, title: '我的 Vue 旅程', content: '内容1' },
            { id: 2, title: '用 Vue 写博客', content: '内容2'},
            { id: 3, title: 'Vue 如此有趣', content: '内容3'}
          ]
        }
    
      })
    </script>

### 四、使用events向父组件发送消息 ###

与 props 相反，需要子组件反过来和父组件进行通信

![20190124195308289.png][]![20190124195323417.png][]

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <div id="components-demo">
      <div :style="{ fontSize: postFontSize + 'em' }">
        <blog-post
          v-for="post in posts"
          v-bind:key="post.id"
          v-bind:post="post"
          v-on:enlarge-text="postFontSize += 0.1"
        ></blog-post>
      </div>
    </div>
    
    <script>
      /*
      * Vue 实例为我们提供了一个自定义事件(custom event)系统
      * 想要向父组件发送事件，我们可以调用实例中内置的 $emit 方法，传递事件名称
      * */
      Vue.component('blog-post', {
        props: ['post'],
        template: `
        <div class="blog-post">
          <h3>{
       { post.title }}</h3>
          <button v-on:click="$emit('enlarge-text')">
            放大文本
          </button>
          <div v-html="post.content"></div>
        </div>
      `
      })
    
      new Vue({
        el: '#components-demo',
        data: {
          posts: [
            { id: 1, title: '我的 Vue 旅程', content: '内容1' },
            { id: 2, title: '用 Vue 写博客', content: '内容2'},
            { id: 3, title: 'Vue 如此有趣', content: '内容3'}
          ],
          postFontSize: 1
        }
    
      })
    </script>

**4.1在event事件中发送一个值**

使用 `$emit` 的第二个参数来提供字号间隔值：

<button v-on:click="$emit('enlarge-text', 0.1)">
      放大文本
    </button>

然后，当我们在父实例中监听这个事件时，我们可以通过 `$event` 来访问这次发送事件的值：

<blog-post
      ...
      v-on:enlarge-text="postFontSize += $event"
    ></blog-post>

或者，如果事件处理函数是一个方法：

<blog-post
      ...
      v-on:enlarge-text="onEnlargeText"
    ></blog-post>

然后，这个值会被传入到方法中，作为第一个参数：

<script>
    methods: {
      onEnlargeText: function (enlargeAmount) {
        this.postFontSize += enlargeAmount
      }
    }
    </script>

**4.2在组件中使用v-model**

自定义事件(custom event)，还可以用来创建出「实现 `v-model` 机制的自定义输入框(custom input)

<input v-model="searchText">

等同于如下：

<input
      v-bind:value="searchText"
      v-on:input="searchText = $event.target.value"
    >

而用于一个组件时，`v-model` 则可以替换为如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="components-demo">
    
      <custom-input v-model="searchText"></custom-input>
    </div>
    
    <script>
      Vue.component('custom-input', {
        props: ['value'],
        template: `
        <input
          v-bind:value="value"
          v-on:input="$emit('input', $event.target.value)"
        >
      `
      })
    
      new Vue({
        el: '#components-demo',
        data: {
          searchText: ''
        }
    
      })
    
    </script>

[20190124195308289.png]: https://img-blog.csdnimg.cn/20190124195308289.png
[20190124195323417.png]: /images/20220323/fc0cea7ae3d84a1ab068d440ad04a407.png

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue基础-3.Vue 组件模板语法

前言 [我只介绍了常用的，更全的可以去看官网][Link 1] 基本语法当涉及到Vue组件模板语法时，有很多不同的概念和元素需要考虑。以下是一个更详细的Vue组

骑猪看日落/ 2024年03月24日 18:30/ 0 赞/ 39 阅读

相关前端基础学习——Vue组件介绍

目录一. Vue组件 1.1.全局组件 1.2.局部组件 1.3.组件模板二. 父子组件三. 组件之间的通信 3.1.子组件获取父组件数据 3.2.父组件

曾经终败给现在/ 2023年09月28日 14:38/ 0 赞/ 84 阅读

相关 Vue - Vue组件基础

推荐：[Vue汇总][Vue] Vue - Vue组件基础为了介绍Vue的组件，先用Vue的组件来改造之前实现的`TodoList`： [Vue - 用Vue

左手的ㄟ右手/ 2022年12月19日 13:12/ 0 赞/ 172 阅读

相关 Vue - Vue组件基础

推荐：[Vue汇总][Vue] Vue - Vue组件基础为了介绍Vue的组件，先用Vue的组件来改造之前实现的`TodoList`： [Vue - 用Vue

小咪咪/ 2022年11月20日 04:57/ 0 赞/ 148 阅读

相关 Vue 组件基础

组件是vue中堪称最为强大的功能之一，这个概念的核心目标就是为了可重用性高，减少重复性的开发。我们可以把组件代码按照template、style、script的拆分方式，放置在

小鱼儿/ 2022年05月17日 10:13/ 0 赞/ 225 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 290 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 322 阅读

相关 Vue组件基础总结

Vue组件基础总结最近刚学了一点Vue组件的内容，因为内容太多了，先在博客中记录一些，以后学了更多再更新。我的学习教材是梁灏编著的《Vue.js实战》和官网的文档，

电玩女神/ 2022年04月10日 05:54/ 0 赞/ 230 阅读

相关 Vue组件基础

组件基础基本示例组件的复用组件的组织通过prop向子组件传递数据单个根元素监听子组件事件使用事件抛出一个值

悠悠/ 2021年10月20日 01:12/ 0 赞/ 357 阅读

相关 Vue组件基础

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

我就是我/ 2021年08月20日 02:20/ 0 赞/ 381 阅读