Me pregunto si puedo obtener datos de componentes, la propiedad de count en esta instancia y consola. Inicie sesión en javascript normal, ¿es esto posible? Quiero hacer console.log(btn.data.count) en este caso
<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>Puede haber varias instancias del componente button-counter , por lo que no puede solicitar el count .
Solo puede acceder a los datos desde el propio componente. Por ejemplo, desde dentro de un método que maneja el evento de 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>' })Puede usar console.log normalmente, solo necesita usarlo donde tenga sentido. No tiene sentido usarlo antes de montar #app .
Intente escribir un método para su conteo ++ y agregue el registro de la consola allí, verá que se ejecuta cada vez.