Статьи / JavaScript / Vue2

parent vs root ($parent, $root)

Часто возникает потребность обратиться к родительскому методу.

$root - обращается как к корневому, так и к родительскому методу, если родительский метод это корневой. Вложенность в один уровень (1).

Если вам захочется перенести дочерний виджет (модуль) в большую вложенность, то в таком случае вам не придется переписывать код для обращения к корневому методу.

$parent обращается только к родительскому виджету!
$root обращается к корневому.

Пример:

var app = new Vue({
    mixins: [childMixin],
    methods: {

    	addModule: function() {
    		console.log('module added');
    	}
    }
});

var childMixin = {

 	methods: {
		add: function (){
			
			//будет работать только в этой вложенности
			this.$parent.addModule(); //console.log('module added');

			//будет работать в любой вложенности, всегда обратится к app.addModule
			this.$root.addModule(); //console.log('module added');
		}
	}
}