Vue 学习笔记 - 基础（下）组件基础

川长思鸟来 2023-02-18 09:57 16阅读 0赞

### Vue 学习笔记 - 基础（下） 组件基础 ###

*  基本示例
 *  组件的复用
 *  组件的组织
 *  通过 Prop 向子组件传递数据
 *  单个根元素
 *  监听子组件事件
 *   *  在组件上使用 \`v-model\`
 *  通过插槽分发内容
 *  动态组件
 *   *  通过已注册的组件名字
     *  通过组件选项对象
 *  解析 DOM 模板时的注意事项
 *  参考资料

# 基本示例 #

定义一个名为 `button-counter` 的新组件

Vue.component('button-counter', { 
      data: function () { 
        return { count: 0}
      },
      template: '<button v-on:click="count++">大爷你点了我 { { count }} 次.</button>'
    })

使用 `button-counter` 组件

1.  组件与普通标签语法一致
2.  组件的参数与`new Vue` 接收相同的选项。各别`el`这种根实例特有的选项除外。

# 组件的复用 #

1.  组件目的就是复用（每个组件都是一个`单独的实例`）
2.  组件的`data`参数是一个函数（猜是为了函数作用域吧，这样各实例才能维护自己独立的一份数据）

# 组件的组织 #

<table> 
 <thead> 
  <tr> 
   <th>注册方式</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>全局注册</code></td> 
   <td>用<code>Vue.component</code>静态方法，注册执行后再实例化的所有<code>实例</code>都有此组件.</td> 
  </tr> 
  <tr> 
   <td><code>局部注册</code></td> 
   <td><code>new Vue({ components : {...}})</code>实例化时<code>components</code>参数注册，只在本实例内生效。</td> 
  </tr> 
 </tbody> 
</table>

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

定义组件中，接受了`title`参数

Vue.component('book', { 
      props: ['title'],
      template: '<p>我喜欢看《{ { title }}》</p>'
    })

`title`作为一个自定义属性使用

结果：

如果我们有一书单，遍历一下：

new Vue({ 
      el: '#app',
      data: { 
        bookList: [{  id: 1, title: '三国演绎'},{  id: 2, title: '水浒传'},{  id: 3, title: '西游记'}]
      }
    })

# 单个根元素 #

组件必须要有一个根元素，所有的内容都包在根根元素下面。

<div>
    	<p>我的书单</p>
    	<p>书名：{ { title }}</p>
    </div>

# 监听子组件事件 #

vm.`$emit`( `eventName`, `[…args]` )  
Vue内键方法，触发当前实例上的事件。附加参数都会传给监听器回调。[详细说明见文档][Link 1]

## 在组件上使用 `v-model` ##

引子：以下两段等价

在组件上用`v-model`，Vue内部相当于这样处理：

<custom-input
      v-bind:value="searchText"
      v-on:input="searchText = $event"
    ></custom-input>

所以我们自定义组件内的`input`要：

1.  将自己的`value`属性绑到自定义组件的`value`这个`prop`上
2.  在自己的`input`事件被触发时，抛个自定义的 `input` 事件，把新的值传出去

Vue.component('custom-input', { 
      props: ['value'],
      template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > `
    })

建议先学完基础篇再看[自定义事件][Link 2]

# 通过插槽分发内容 #

组件标签中的内容，会替换`<slot></slot>`

<div id="app">
    	<book>666</book>
    	<book>999</book>
    </div>
    <script> Vue.component('book', { template: "<div>这段红色部分<span style='color:#f00'><slot></slot></span>是使用组件时填写的标签内容</div>" }) new Vue({ el: '#app'}) </script>

![在这里插入图片描述][20200617153546255.png]  
建议先学完基础篇再看[插槽详情][Link 3]

# 动态组件 #

`<component>`元素通过`is`属性来实现动态显示指定组件

## 通过已注册的组件名字 ##

<div id="app">
    	<button v-for="n in ['a','b','c']" v-on:click="currentTab = 't-'+n">标签{
       {n}}</button>
    	<component v-bind:is="currentTab"></component>
    </div>
    
    <script> new Vue({ el: "#app", data: { currentTab: "t-a" }, components:{ "t-a":{ template : "<div>这是a标签页。aaaaaaaaaaaaaaaa</div>"}, "t-b":{ template : "<div>这是b标签页。bbbbbbbbbbbbbbbb</div>"}, "t-c":{ template : "<div>这是c标签页。cccccccccccccccc</div>"} } }); </script>

## 通过组件选项对象 ##

<div id="app">
    	<button v-for="tab in tabs" v-on:click="currentTab = tab">{
       {tab.name}}</button>
    	<component v-bind:is="currentTab.component"></component>
    </div>
    
    <script> var tabs =[ { name: "标签a", component:{ template : "<div>这是a标签页。aaaaaaaaaaaaaaaa</div>"}}, { name: "标签b", component:{ template : "<div>这是b标签页。bbbbbbbbbbbbbbbb</div>"}}, { name: "标签c", component:{ template : "<div>这是c标签页。cccccccccccccccc</div>"}} ]; new Vue({ el: "#app", data: { currentTab: tabs[0], tabs: tabs} }); </script>

到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把[动态和异步组件][Link 4]读完。

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

`<ul>`、`<ol>`、`<table>`和`<select>`内部限制只能放特定元素。自定组件可以通过 `is`指定自定义组件`book`

需要注意的是如果我们从`以下来源`使用模板的话，是`不存在限制`：

*  字符串 (例如：`template: '...'`)
 *  [单文件组件][Link 5] (`.vue`)
 *  **`<script type="text/x-template">`**

# 参考资料 #

[Vue 官方教程基数篇 - 本笔记的学习对象][Vue _ -]  
[Vue 官方CLI 官方文档][Vue _CLI]  
[Vue 官方API 参考][Vue _API]  
[Vue 官方API文档 - 生命周期钩子][Vue _API_ -]

[vue-devtools 编译安装][vue-devtools]  
[我的 Vue CLI 学习笔记][Vue CLI]  
[Vue 学习笔记 - 基础（上）][Vue _ - 1]  
[Vue 学习笔记 - 基础（中）][Vue _ - 2]  
Vue 学习笔记 - 基础（下）组件基础  
[Vue 学习笔记 - 深入了解组件][Vue _ - 3]

[MDN 完整有效按键名 Key Values][MDN _ Key Values]  
[千锋教育-李卫民 Vue 渐进式 JavaScript 框架][-_ Vue _ JavaScript]

[Link 1]: https://cn.vuejs.org/v2/api/#vm-emit
[Link 2]: https://cn.vuejs.org/v2/guide/components-custom-events.html
[20200617153546255.png]: https://img-blog.csdnimg.cn/20200617153546255.png
[Link 3]: https://cn.vuejs.org/v2/guide/components-slots.html
[Link 4]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html
[Link 5]: https://cn.vuejs.org/v2/guide/single-file-components.html
[Vue _ -]: https://cn.vuejs.org/v2/guide/
[Vue _CLI]: https://cli.vuejs.org/zh/
[Vue _API]: https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property
[Vue _API_ -]: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
[vue-devtools]: https://blog.csdn.net/jx520/article/details/106635106
[Vue CLI]: https://blog.csdn.net/jx520/article/details/106609547
[Vue _ - 1]: https://blog.csdn.net/jx520/article/details/106745449
[Vue _ - 2]: https://blog.csdn.net/jx520/article/details/106752594
[Vue _ - 3]: https://blog.csdn.net/jx520/article/details/106812618
[MDN _ Key Values]: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key/Key_Values
[-_ Vue _ JavaScript]: https://www.funtl.com/zh/guide/Vue-%E6%B8%90%E8%BF%9B%E5%BC%8F-JavaScript-%E6%A1%86%E6%9E%B6.html