Vue组件传递json参数答案

【问题标题】：Vue components pass json parameterVue组件传递json参数
【发布时间】：2020-11-16 02:46:08
【问题描述】：

我似乎无法将 Vue 数据从模板传递到 Vue 组件，我使用 Handlebars，我需要从 Handlebars 传递数据什么都不显示（对不起我的英语不好）我把代码放在这里https://codesandbox.io/s/fervent-hypatia-hq884?file=/src/App.vue

我尝试使用此解决方案，但我不能 https://jsfiddle.net/Beowulfdgo/4qo1xjad/2/

<template>
<div id="app3">
    <FiltroAudioannotations  parametro="hola"></FiltroAudioannotations>
</div>
</template>

<script>
import FiltroAudioannotations from "./components/FiltroAudioannotations.vue";

export default {
    name: "App3",
    components: {
        FiltroAudioannotations,
    }
};
</script>

这是我的组件

<template>
<div>Audio annotations
  Aqui
  
    {{otro}}
    <button v-on:click="getTodos()"></button>
    <table>
        <thead>
            <tr>
                <th>Titulo</th>
                <th>Lengua Terminal</th>
                <th>Gpo de Lenguas</th>
                <th>Comunidad</th>
                <th>Hablantes</th>
                <th>Genero y Duración</th>

            </tr>
        </thead>
        <tr>
            <td><input type="text" id="titulo" name="titulo"> </td>
            <td><input type="text" id="lengua" name="lengua"> </td>
            <td><input type="text" id="gpo_lengua" name="gpo_lengua"></td>
            <td><input type="text" id="comunidad" name="comunidad"></td>
            <td><input type="text" id="hablantes" name="hablantes"></td>
            <td><input type="text" id="genero" name="genero"></td>

        </tr>
    </table>
</div>
</template>


<script>
export default {
    name: "FiltroAudioannotations",
      props: {
    parametro: Object,
  },
    data() {
        return {
            json: {},
            result: null,
            otro:"nuevo"

        }
    },
    methods: {
      setJson (payload) {
            this.json = payload
        },
        async getTodos() {
            let response = await this.axios.get("http://localhost:40923/audioannotations/filter")
            if (response) {
                this.response = response.data;
                console.log(response.data)
            }

        }
    }
}
</script>

这是我的车把文件

<div id="app3"  >
    <FiltroAudioannotations  :json="setJson({ foo: 'bar' })" >
      {{json}}
    </FiltroAudioannotations>
</div>

<table>
</table>

【问题讨论】：

标签： vue.js

【解决方案1】：

您试图从父级调用子级的 setJson 方法，但这是行不通的。删除该方法并将孩子的 json 数据更改为道具：

应用模板：

<div id="app">
  <FiltrosAudioannotations :json="{ foo: 'bar' }"></FiltrosAudioannotations>
</div>

FiltrosAudioannotations 实例：

export default {
  name: "FiltroAudioannotations",
  props: {
    food: Object,
    json: Object,
  },
  data() {
    return {
      result: null,
      otro: "nuevo",
    };
  },
};

【讨论】：

我也在想同样的事情；）