Vue学习笔记（二）

使用Vue的注意事项

重复的功能一般做成组件。
在子组件定义data，必须是一个函数，返回一个对象。
自定义事件命名必须是小写+中划线形式，如listen-event

父子组件通信

在做项目的过程中经常遇到需要父子组件通信的情况，这里总结一下常用的方法。

父传子

在父组件通过 v-bind 指令传值给子组件,在子组件通过props接收

//父组件
<todo-item :todo="todo" /> //将父组件的todo传给子组件
//子组件
 props: ["todo"]

子传父

父组件在子组件上绑定自定义事件，然后在子组件通过 emit 广播触发该事件调用相关函数。传递参数给父组件

//父组件中
methods:{
    updateTodo(){
        ...
    }
}
...
<todo-item @update="updateTodo" />
//子组件
this.$emit('update',param1,param2)

注意：自定义事件不能用驼峰，推荐使用中划线。

vue 组件开发props验证

prop类型：这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户

props: {
  title: String,
  likes: Number,
}

default : 默认值，当type为Array或Object时，default必须是一个函数。
required ：必填项

    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。例如以下的情况

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。推荐使用

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

这个 prop 以一种原始的值传入且需要进行转换

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

.native 事件修饰符事件修饰符

你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。

v-once

被定义了 v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示，可以用来优化性能。

<div id="app">
    <div v-once>
        {{content}}
    </div>
</div>

动态组件

:is 指令

type 定义的是组件名称的变量，通过改变 type 值可以达到切换的目的，比如 tab栏切换。

<component :is="type"><component/>

currentTabComponent 可以包括

已注册组件的名字，或
一个组件的选项对象