Vue 中组件概念

标签：bsp   str   cli   单击   -o   3.1   span   tag   one   

1 为了能在模板中使用，组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

全局注册是通过Vue.component 来向Vue注册，例子

Vue.component(‘my-component-name‘, {
  // ... options ...
})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

2 通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

3 通过事件向父组件发送消息

3.1 子组件触发父组件的一个事件，我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件。例如：单击按钮，向父组件发送‘enlarge-text’事件。

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

3.1.2 通过函数第二个参数向父组件传递参数

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

然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

或者，如果事件的处理函数是一个方法

Vue 中组件概念

标签：bsp   str   cli   单击   -o   3.1   span   tag   one   

原文地址：https://www.cnblogs.com/zhaopengcheng/p/9374575.html