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>
或者,如果事件的处理函数是一个方法
原文地址:https://www.cnblogs.com/zhaopengcheng/p/9374575.html
时间: 2024-09-29 05:49:04