我想知道我是否能夠獲取組件資料、count此實體中的屬性并將其 console.log 記錄到普通的 javascript 中，這可能嗎？console.log(btn.data.count)在這種情況下我想做
<div id="app" v-cloak>
<h1>{{greeting}}</h1>
<button-counter></button-counter>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
let app = Vue.createApp({
data: function(){
return {
greeting: "hi"
}
}
})
let btn = app.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count ">You clicked me {{ count }} times.</button>'
})
console.log(btn.data.count) // doesn't work
app.mount("#app")
</script>
uj5u.com熱心網友回復：
有可能是多個實體button-counter組成部分，所以你不能要求的 count。
您只能從組件本身訪問資料。例如，在處理click事件的方法中：
let btn = app.component('button-counter', {
data: function () {
return {
count: 0
}
},
methods: {
onClick() {
console.log(this.count)
this.count
}
},
template: '<button v-on:click="onClick">You clicked me {{ count }} times.</button>'
})
uj5u.com熱心網友回復：
你可以正常使用 console.log 你只需要在有意義的地方使用它。在#app安裝之前使用它沒有意義。
嘗試為您的count 撰寫一個方法并在那里添加控制臺日志，您將看到它每次都被執行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/361101.html
標籤：javascript Vue.js
上一篇：JQuery提交功能的泛化