[Vuejs]-Vue component react to changes in vue data object

by

0👍

You can use props to pass data from parent to the child component.
More details can be found on the official documentation.
https://v2.vuejs.org/v2/guide/components.html#Props

// Component declaration
Vue.component('table-element', {
    // declare the props
    props: ['tableHtml'],
    
    // just like data, the prop can be used inside templates
    // and is also made available in the vm as this.message
    template: '<div>{{ tableHtml }}</div>',
    
    data: function() {    
        self = this; 
        return self.tableHtml;
});


page = new Vue({

  el: "#container",

  data: {
    table_html: "<table>...table contents </table>
  }
  
 
})
<div id="container">
  <table-element v-bind:table-html = "table_html" ></table-element>
</div>

0👍

1) props can be a good solution in communication parent- child components or recorder -direct registered child. remember that props is a variable data as data in a vue instante.
2) you store data a object in javascript in global scope in your external js file , if you use it in passing data to offspring child in the architecture of html code- it isn’t a elegant solution.
3) you can use vuex to control the communication of data in the architecture of components.

Leave a comment