vue组件化开发

时间：2020-07-16 19:34:33 阅读：47 评论：0 收藏：0 [点我收藏+]

1. 组件是什么？

组件是可复用的 Vue 实例，且带有一个名字。它们与 new Vue 接收相同的选项。

2. data必须是一个函数

每个组件都会各自独立维护它的 data。
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

3. 通过 props[字符串数组] 向子组件传递数据

props 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在组件实例中访问这个值，就像访问 data 中的值一样。
可以使用 v-bind 来动态传递 prop

<!-- 父组件 -->
<container :title="mytitle"></container>

data() {
　　return {
　　　　mytitle: ‘my happy job‘
　　}
}

<!-- 子组件 -->
Vue.component(‘container‘, {
  props: [‘title‘],
  template: ‘<h3>{{ title }}</h3>‘
})

4. 监听子组件事件

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

<!-- 父组件 -->
<container
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></container>

<!-- 子组件 -->
<button v-on:click="$emit(‘enlarge-text‘)">
  Enlarge text
</button>

使用事件抛出一个值 -- 在父级组件监听这个事件时，可通过 $event访问到被抛出的这个值

<!-- 父组件 -->
<container
  ...
  v-on:enlarge-text="postFontSize += $event"
></container>

<!-- 子组件 -->
<button v-on:click="$emit(‘enlarge-text‘, 0.1)">
  Enlarge text
</button>

<!-- 父组件 -->
<container 
    ... 
    v-on:enlarge-text="onEnlargeText" 
></container>
methods: { 
　　onEnlargeText: function (enlargeAmount) { 
　　　　this.postFontSize += enlargeAmount 
　　} 
}

<!-- 子组件 -->
<button v-on:click="$emit(‘enlarge-text‘, 0.1)">
  Enlarge text
</button>

在组件上使用 v-model

<!-- 父组件 -->
<container v-model="searchText"></container>

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

<!-- 子组件 -->
Vue.component(‘container‘, {
　　model: {
　　　　prop: ‘checked‘,
　　　　event: ‘change‘
　　},
    props: [‘checked‘],
    template: `
        <input
　　　　　　　type="checkbox"
            v-bind:checked="checked"
            v-on:input="$emit(‘change‘, $event.target.checked)"
        >
    `
})

5. 单文件组件 -- 高内聚，低耦合。易维护

优点：完整语法高亮；commonJS模块；组件作用域的css

<template>
    <div class="container"></div>
</template>
<script>
    export default {
        name: ‘cointainer‘,
        data() {
            return {

            }
        }
    }
</script>
<style>
</style>

6. prop

对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。
单向数据流
- 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。

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

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

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

禁用attribute继承 --- inheritAttrs: false　　
- inheritAttrs: false 选项不会影响 style 和 class 的绑定

7. 自定义事件

推荐始终使用 kebab-case 的事件名，因为v-on事件监听器在 DOM 模板中会被自动转换为全小写

vue组件化开发

原文：https://www.cnblogs.com/pleaseAnswer/p/13324165.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)