vue学习 04 vue组件

如何划分组件

• 功能模块
  
  • 以功能来划分
• 页面区域
  
  • 以页面区域块来划分

vue组件之间的调用

• component
  
  • 定义好组件之后，需要在当前页面引入
  • 还需要在需要引入的vue的component内 声明组件
  • 然后在需要使用的位置加上 组件

vue组件之间的通信 props

• 组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

• 父组件向子组件传参

  • 子组件内部定义 props来接收
• 示例

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ message }}</span>'
})

• 然后我们可以这样向它传入一个普通字符串：

<child message="hello!"></child>

• 自定义事件
  我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。

使用 v-on 绑定自定义事件

• 每个 Vue 实例都实现了事件接口，即：

  • 使用 $on(eventName) 监听事件
  • 使用 $emit(eventName) 触发事件

• 即在子组件内使用$emit 触发事件，传入参数

• 在父组件内定义的模板组件内使用 v-on 监听事件(监听子组件自定义触发的事件)