调用对象中定义的函数

Question

有一个'card'对象带有'func'属性，这是一个函数。我想将这个对象'card'传递给另一个组件，并从第二个组件调用它的函数。

第一部分：

>template> <second-component :card="card"> </second-component> </template>

和脚本：

>script>data: () => ({ card: {caption: 'cap',func: function () { console.log('here')} }}) </script>

第二部分：

>div> @click="clicked"</div>

脚本：

props: ['card' ], methods: { clicked() {this.card.func} }

为什么它什么都不做？如何从第二个组件调用该函数？

`

Answer 1

我认为你没有执行这个功能

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <export-to-pdf elem-id="topdf"></export-to-pdf>

  <table class="table table-hover" id="topdf" style="width:100%;color: black;border:none;">
    <tr>
      <td style="font-size: 22px;border:none;font-weight:
                     bold">
        <h3 style="font-weight: 700;padding:
                      0px;margin:0px;">
          Details of Test
        </h3>
      </td>
    </tr>

    <tr>
      <td>
        <span style="font-weight: bold;margin-
                        bottom:20px;">Customer Name</span>
        <span> &nbsp;:&nbsp;&nbsp;</span>
        <span>Name</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: bold;">
                        Customer
                        Email
                    </span>
        <span> &nbsp;:&nbsp;&nbsp;</span>
        <span>Email</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: bold;">Address</span>
        <span> &nbsp;:&nbsp;&nbsp;</span>
        <span>address_1, address_2, address_3</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: bold;">City</span>
        <span> &nbsp;:&nbsp;&nbsp;</span>
        <span>city</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: bold;">State</span>
        <span> &nbsp;:&nbsp;&nbsp;</span>
        <span>state</span>
      </td>
    </tr>
    <tr>
      <td>
        <span style="font-weight: bold;">Country</span>
        <span> &nbsp;:&nbsp;&nbsp;</span>
        <span>country</span>
      </td>
    </tr>
  </table>
</div>