Vue学习笔记

1、父子组建::子组件只能在父组件的template中使用。

2、组件的el和data选项

传入Vue构造器的多数选项也可以用在 Vue.extend() 或Vue.component()中,不过有两个特例: datael
Vue.js规定:在定义组件的选项时,data和el选项必须使用函数。

下面的代码在执行时,浏览器会提出一个错误

Vue.component('my-component', {
    data: {
        a: 1
    }
})

另外,如果data选项指向某个对象,这意味着所有的组件实例共用一个data。
我们应当使用一个函数作为 data 选项,让这个函数返回一个新对象:

Vue.component('my-component', {
    data: function(){
        return {a : 1}
    }
})

3、组建内部要调用其他组件,就必须要在components里面定义一边,即使在同一个“#app"标签下也不行,不声明就别想直接调用,注:但是,有一种意外,就是全局定义的组建,可以直接不用component声明直接调用

4、slot和父子组件之间的访问和通信,slot是一个非常有用的东西,它相当于一个内容插槽,它是我们重用组件的基础。Vue的事件系统独立于原生的DOM事件,它用于组件之间的通信。

  • 组件的编译作用域
  • 在组件template中使用<slot>标签作为内容插槽
  • 使用$children, $refs, $parent 实现父子组件之间的实例访问
  • 在子组件中,使用$dispatch向父组件派发事件;在父组件中,使用$broadcast向子组件传播事件
  • 结合这些基础知识,我们一步一步实现一个CURD的示例

5、为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发,Vue.js 实现了一个内容分发 API,使用特殊的 <slot> 元素作为原始内容的插槽。

6、注意:尽管可以通过$parent,访问父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据。另外,在子组件中修改父组件的状态是非常糟糕的做法,因为: 
1.这让父组件与子组件紧密地耦合; 
2. 只看父组件,很难理解父组件的状态。因为它可能被任意子组件修改!理想情况下,只有组件自己能修改它的状态。

7、自定义事件

有时候我们希望触发父组件的某个事件时,可以通知到子组件;触发子组件的某个事件时,可以通知到父组件。
Vue 实例实现了一个自定义事件接口,用于在组件树中通信。这个事件系统独立于原生 DOM 事件,用法也不同。

每个 Vue 实例都是一个事件触发器:

  • 使用 $on() 监听事件;
  • 使用 $emit() 在它上面触发事件;
  • 使用 $dispatch() 派发事件,事件沿着父链冒泡;
  • 使用 $broadcast() 广播事件,事件向下传导给所有的后代。

8、Vue.js组件的API来源于三部分——prop,slot和事件。

  • prop 允许外部环境传递数据给组件;
  • 事件 允许组件触发外部环境的 action;
  • slot 允许外部环境插入内容到组件的视图结构内。
原文地址:https://www.cnblogs.com/liujinyu/p/6489868.html