Vue - метод передачи в качестве опоры для детей - PullRequest
Новая
       2

Vue - метод передачи в качестве опоры для детей

0 голосов
/ 28 августа 2018

https://jsfiddle.net/56odmcxk/42/

Я использовал Vue и смог передать методы в качестве реквизита. В примере кода parent, child и grand child. Child может передать метод в grandChild, который объявлен через Vue.component. Но я не могу передать метод от родителя к ребенку. Я новичок в Vuejs, пожалуйста, объясните, если это проблема с областью действия или методы $ root не определены при создании компонентов, вызывающих неопределенное свойство в дочернем компоненте. PS. Я использовал код из аналогичного вопроса для демонстрации. 

Vue.component('grandchild', {
  template: '<div>grandchild - {{ data2.value }}</div>',
  props: ['data2', "secondMethod"],
  mounted(){
    console.log("this is grand child");
    this.secondMethod();
  }
});

Vue.component('child', {
  template: '<div>child - {{ data1.id }}<grandchild :secondMethod="secondMethod" v-bind:data2="data2"></grandchild></div>',
  props: ['data1', 'testChildMethod'],
  mounted() {
    console.log("child element is mounted");
    /* this.testMethod() */;
    this.testChildMethod();
  },
  computed: {
    data2() {
      return {
        value: this.data1.id
      }
    }
  },
  methods: {
    secondMethod(){
        console.log("second method");
    }
  }
});

let v = new Vue({
  el: '#div',
  data: {
    data1: {
      id: 3
    }
  },
  methods: {
    testMethod() {
      console.log("test method is passed");
    }
  }
});


setInterval(function() {
    v.testMethod();
/*   v.data1.id++; */
}, 1000);

1 Ответ

0 голосов
/ 28 августа 2018

https://jsfiddle.net/uvet4frb/2/

PS. Это не мой ответ, предложение удалено кем-то. 

<div id='div'>
  <child :data1="data1" :test-Method="testMethod"></child>
</div>

https://vuejs.org/v2/guide/components-props.html

Это означает, что когда вы используете шаблоны in-DOM, имена реквизитов camelCased должны использовать их эквиваленты в кебабе (с разделителями-дефисами):

...