new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } }, methods: { baz: function () { /* ... */ } } })
子から親をアクセス
// 获取根组件的数据 this.$root.foo // 写入根组件的数据 this.$root.foo = 2 // 访问根组件的计算属性 this.$root.bar // 调用根组件的方法 this.$root.baz()//一階層であれば、$parentを利用
this.$parent.baz()
親から子をアクセス
//子Component
<base-input ref="usernameInput"></base-input>
new Vue({
data: {
foo: 1
},
computed: {
bar: function () { /* ... */ }
},
methods: {
// 用来从父级组件聚焦输入框
focus: function () {
this.$refs.usernameInput.focus()
}
}
})
先祖にアクセスする方法：先祖側にprovide, inject
//先祖より子孫に提供するdata/methods
provide: function () {
return {
getMap: this.getMap
}
}
//子孫側にinjectで受取る
inject: ['getMap']
イベント監視
$on(eventName, eventHandler)$once(eventName, eventHandler)$off(eventName, eventHandler) //stop a $on event
mounted: function () {
var picker = new Pikaday({
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
//親がbeforeDestroyの時に、先にpickerをdestoryする
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
//複数datapickerを利用する場合
mounted: function () {
this.attachDatepicker('startDateInput')
this.attachDatepicker('endDateInput')
},
methods: {
attachDatepicker: function (refName) {
var picker = new Pikaday({
field: this.$refs[refName],
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestroy', function () {
picker.destroy()
})
}
}
0 件のコメント:
コメントを投稿