Vue $root

by Simon Herteby

HTML

<div id="vue">
  <edit></edit>
  <div>root: {{$root.stuff}}</div>
  <child></child>
</div>

JavaScript

new Vue({
	el:'#vue',
  data(){
  	return {
    	stuff:'hello'
    }
  },
  components:{
  	child:{
    	template:`<div>child: {{$root.stuff}}<grandchild></grandchild></div>`,
      components:{
      	grandchild:{
        	template:`<div>grandchild: {{$root.stuff}}<div>reverse: {{reverse}}</div></div>`,
          computed:{
          	reverse(){
            	return this.$root.stuff.split('').reverse().join('')
            }
          }
        }
      }
    },
    edit:{
    	template:`<input v-model="$root.stuff">`
    }
  }
})