VueJS 从实例访问组件
VueJS accessing components from instance
我正在寻找一种方法来从我的实例访问我的组件的方法
<button id="live" class="ui primary button" v-on:click.prevent="live">
Live Text
</button>
它直接在我的 #app
中,并让它从我的组件 live
中启动一个方法 Live.vue
我在版本 [=32 之前找到了大量的文档=] 关于 broadcast
和 dispatch
,但是在尝试使用 $emit
让它工作一个小时后,我不确定我在做什么了..
<template>
<div v-if="loaded">
Live
</div>
</template>
<script>
export default {
data: function () {
return {
loading: false,
loaded: false,
}
},
methods: {
load: function (event) {
console.log('loading..')
this.loaded = !this.loaded
}
},
mounted: function () {
// this.$on('liveClick', function (msg) {
// console.log(msg)
// })
},
name: 'Live',
props: {
'id': Number,
'key': String
}
}
</script>
和init.js
(这是一个基于laravel的结构)
window.App = new Vue({
el: '#app',
methods: {
live: function (event) {
this.$emit('liveClick', 'msg')
}
}
})
我已经 'workaround' 使用 Vuex,但我不需要为了让它工作而使我的学习曲线复杂化。
jsfiddle: https://jsfiddle.net/c4s44qgy/1/
您可以在此处找到固定的 fiddle:https://jsfiddle.net/gr9c6h64/
基本上,当你想从主 Vue 实例向组件传递数据时,你必须像我在 fiddle: props: { loaded: String }
中所做的那样在这个组件中使用道具,然后从父级传递值使用 :loaded='isLoaded'
我不认为这正是您想要做的,但看起来这正是您遇到的问题。希望对您有所帮助!
我正在寻找一种方法来从我的实例访问我的组件的方法
<button id="live" class="ui primary button" v-on:click.prevent="live">
Live Text
</button>
它直接在我的 #app
中,并让它从我的组件 live
中启动一个方法 Live.vue
我在版本 [=32 之前找到了大量的文档=] 关于 broadcast
和 dispatch
,但是在尝试使用 $emit
让它工作一个小时后,我不确定我在做什么了..
<template>
<div v-if="loaded">
Live
</div>
</template>
<script>
export default {
data: function () {
return {
loading: false,
loaded: false,
}
},
methods: {
load: function (event) {
console.log('loading..')
this.loaded = !this.loaded
}
},
mounted: function () {
// this.$on('liveClick', function (msg) {
// console.log(msg)
// })
},
name: 'Live',
props: {
'id': Number,
'key': String
}
}
</script>
和init.js
(这是一个基于laravel的结构)
window.App = new Vue({
el: '#app',
methods: {
live: function (event) {
this.$emit('liveClick', 'msg')
}
}
})
我已经 'workaround' 使用 Vuex,但我不需要为了让它工作而使我的学习曲线复杂化。
jsfiddle: https://jsfiddle.net/c4s44qgy/1/
您可以在此处找到固定的 fiddle:https://jsfiddle.net/gr9c6h64/
基本上,当你想从主 Vue 实例向组件传递数据时,你必须像我在 fiddle: props: { loaded: String }
中所做的那样在这个组件中使用道具,然后从父级传递值使用 :loaded='isLoaded'
我不认为这正是您想要做的,但看起来这正是您遇到的问题。希望对您有所帮助!