How to access a Vue component's data from a script-CodePudding

Here are the simplified html and javascript files of the page. It has a button and component which is a text displays the data of the component. I want the component's data to be changed when I click the button. But how to access the component's data from a script?

index.html

<body>
  
  <div id="app">
    <my-component></my-component>
    <button id="btn"> change data </button>
  </div>  
  
  <script src="https://unpkg.com/vue@next"></script>
  <script src="./main.js"></script>

</body>

main.js


let app = Vue.createApp({});
app.component('my-component', {
    data: function() {
      return {
        component_data : "foo"
      }
    },
    template: '<p> data = {{ component_data }} </p>'
  }
);
app.mount("#app");

document.querySelector("btn").onclick = function() {
  // HOW TO CHANGE component_data TO "bar"
}

CodePudding user response：

One possibility is to incorporate the button into the HTML within the component's template. If that's feasible for your app then you can add a function to the component and bind the function to the button's click event.

E.g. (Note this is untested so may have typos)

app.component('my-component', {
    data: function() {
      return {
        component_data : "foo"
      }
    },
    methods: {
        changeData() {
           this.component_data = "The data changed";
        }
    },
    template: `<p> data = {{ component_data }} </p>
<button @click="changeData">Change data</button>`
  }
);

If the button can't be incorporated into my-component then I'd recommend using the Vuex datastore. Vuex is a reactive datastore that can be accessed across the entire application.

CodePudding user response：

You can use component props change data between components.

index.html

<body>
  
  <div id="app">
    <my-component :component-data="text"></my-component>
    <button @click="handleBtnClick"> change data </button>
  </div>  
  
  <script src="https://unpkg.com/vue@next"></script>
  <script src="./main.js"></script>

</body>

main.js file

let app = Vue.createApp({
    data() {
        return { text: 'foo' }
    },
    methods: {
        handleBtnClick() {
            this.text = 'bar';
        }
    }
});
app.component('my-component', {
    props: {
        componentData: {
            type: String,
            default: 'foo'
        }
    }
    template: '<p> data = {{ componentData }} </p>'
  }
);
app.mount("#app");

I think you new in Vuejs. You have to first read Vue documentation

CodePudding user response：

To get the reference of a component outside of it, you can use the template refs

Here is the refactor of the code provided in the above question to access the components data from the script.

<div id="app">
  <my-component ref="my_component"></my-component>
  <button @click="onBtnClick()"> change data </button>
</div>

let app = Vue.createApp({
  methods: {
    onBtnClick() {
      this.$refs.my_component.component_data = "bar";
    }
  }
});