vue进阶

1. 函数组件

函数组件 是无状态的，没有生命周期或方法，因此无法实例化
创建一个函数组件非常容易，你需要做的就是在SFC中添加一个 functional: true 属性，或者在模板中添加 functional。由于它像函数一样轻巧，没有实例引用，所以渲染性能提高了不少。
函数组件依赖于上下文，并随着其中给定的数据而突变。

<template functional>
  <div class="book">
    {{props.book.name}} {{props.book.price}}
  </div>
</template>

<script>
Vue.component('book', {
  functional: true,
  props: {
    book: {
      type: () => ({}),
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement(
      'div',
      {
        attrs: {
          class: 'book'
        }
      },
      [context.props.book]
    )
  }
})
</script>

2.深层选择器

有时，你需要修改第三方组件的CSS，这些都是 scoped 样式，移除 scope 或打开一个新的样式是不可能的。现在，深层选择器 >>> /deep/ ::v-deep 可以帮助你

<style scoped>
>>> .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
/deep/ .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
::v-deep .scoped-third-party-class {
  color: gray;
}
</style>

3.事件参数：$event

$event 是事件对象的一个特殊变量。它在某些场景下为复杂的功能提供了更多的可选参数。
原生事件: 在原生事件中，该值与默认事件（DOM事件或窗口事件）相同。

<template>
  <input type="text" @input="handleInput('hello', $event)" />
</template>

<script>
export default {
  methods: {
    handleInput (val, e) {
      console.log(e.target.value) // hello
    }
  }
}
</script>

自定义事件: 在自定义事件中，该值是从其子组件中捕获的值。

<!-- Child -->
<template>
  <input type="text" @input="$emit('custom-event', 'hello')" />
</template>

<!-- Parent -->
<template>
  <Child @custom-event="handleCustomevent" />
</template>

<script>
export default {
  methods: {
    handleCustomevent (value) {
      console.log(value) // hello
    }
  }
}
</script>