网站建设a2345,学校网站建设规划,wordpress com login,网站建设需要域名吗?Vue.js 组件 - 自定义事件
父组件是使用 props 传递数据给子组件#xff0c;但如果子组件要把数据传递回去#xff0c;就需要使用自定义事件#xff01;
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)#xff0c;即#xff1a;
…Vue.js 组件 - 自定义事件
父组件是使用 props 传递数据给子组件但如果子组件要把数据传递回去就需要使用自定义事件
我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)即
使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件
另外父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
实例
div idappdiv idcounter-event-examplep{{ total }}/pbutton-counter v-on:incrementincrementTotal/button-counterbutton-counter v-on:incrementincrementTotal/button-counter/div
/divscript
Vue.component(button-counter, {template: button v-on:clickincrementHandler{{ counter }}/button,data: function () {return {counter: 0}},methods: {incrementHandler: function () {this.counter 1this.$emit(increment)}},
})
new Vue({el: #counter-event-example,data: {total: 0},methods: {incrementTotal: function () {this.total 1}}
})
/script如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如 my-component v-on:click.nativedoTheThing/my-componentdata 必须是一个函数
上面例子中可以看到 button-counter 组件中的 data 不是一个对象而是一个函数
data: function () {return {count: 0}
}这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝如果 data 是一个对象则会影响到其他实例如下所示
实例
div idcomponents-demo3 classdemobutton-counter2/button-counter2button-counter2/button-counter2button-counter2/button-counter2
/divscript
var buttonCounter2Data {count: 0
}
Vue.component(button-counter2, {/*data: function () {// data 选项是一个函数组件不相互影响return {count: 0}},*/data: function () {// data 选项是一个对象会影响到其他实例return buttonCounter2Data},template: button v-on:clickcount点击了 {{ count }} 次。/button
})
new Vue({ el: #components-demo3 })
/script自定义组件的 v-model
组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
input v-modelparentData等价于
input :valueparentDatainputparentData $event.target.value以下实例自定义组件 kxdang-input父组件的 num 的初始值是 100更改子组件的值能实时更新父组件的 num
实例
div idappkxdang-input v-modelnum/kxdang-inputp输入的数字为:{{num}}/p
/div
script
Vue.component(kxdang-input, {template: p !-- 包含了名为 input 的事件 --inputrefinput:valuevalue input$emit(input, $event.target.value)/p,props: [value], // 名为 value 的 prop
})new Vue({el: #app,data: {num: 100,}
})
/script由于 v-model 默认传的是 value不是 checked所以对于复选框或者单选框的组件时我们需要使用 model 选项model 选项可以指定当前的事件类型和传入的 props。
实例
div idappbase-checkbox v-modellovingVue/base-checkbox div v-showlovingVue 如果选择框打勾我就会显示。 /div
/div
script
// 注册
Vue.component(base-checkbox, {model: {prop: checked,event: change // onchange 事件},props: {checked: Boolean},template: inputtypecheckboxv-bind:checkedcheckedv-on:change$emit(change, $event.target.checked)
})
// 创建根实例
new Vue({el: #app,data: {lovingVue: true}
})
/script实例中 lovingVue 的值会传给 checked 的 prop同时当 base-checkbox 触发 change 事件时 lovingVue 的值也会更新。
