Question

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

我已经使用Vue并能够将方法作为道具传递。在代码示例中，父母，子女和孙子女。 Child可以将方法传递给grandChild，它们都通过Vue.component声明。但是我不能将方法从父母传递给孩子。我是Vuejs的新手，请在创建导致Child组件中未定义属性的组件时解释它是否是作用域问题或未定义$ 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);

Answer 1

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模板时，骆驼式道具名称需要使用kebab大小写（用连字符分隔）：

Vue-为孩子传递道具的方法

1 个答案: