Vue - 将方法作为道具传递给孩子

Posted 2023-02-23

【中文标题】Vue - 将方法作为道具传递给孩子

【英文标题】：Vue - Passing method as prop to children

【发布时间】：2019-02-03 12:25:19

【问题描述】：

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

我使用过 Vue 并且能够将方法作为道具传递。 在代码示例中，父、子和孙子。 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);

【问题讨论】：

看起来您没有将父 testMethod 绑定到子 vue 组件（您正在使用 child --> 孙子与

我在html模板中做了。 刚才看到回复，建议用kebab case做绑定，我测试了它奏效了。我想标记为答案，但它就消失了。

【参考方案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

这意味着当您使用 DOM 内模板时，camelCased 道具名称需要使用它们的 kebab 大小写（连字符分隔）等效项：