Vue从父组件绑定子组件数据答案

【问题标题】：Vue bind child component data from parentVue从父组件绑定子组件数据
【发布时间】：2021-12-27 10:01:04
【问题描述】：

我需要从父组件绑定我的子组件数据 (inputData) 但它不起作用我找不到我的错误在哪里

app.js

let vm = new Vue({
    el: "#app",
    components: {
        'modal-panel': modal,
        'rich-select': richSelect,
        'file-upload': uploader,
    },
    data(){ return {
        isModalActive: false,
        inputData: null
    }} ,
    methods: {
        toggleModal(){
            this.isModalActive = !this.isModalActive
        },
        modalData(){
            this.inputData = 'Example Data'
        }
    }
});

Modal.vue

<template>
  <input type="text" :value="inputData" >
</template>



export default {
    name: 'modal',
    props: ['inputData'],
    mounted(){
        console.log('modal Mounted')
    }
};

在我的刀片内部，我正在像这样调用模态组件

<div class="container"  id="app">    
  <modal-panel v-if="isModalActive" @close="toggleModal" :inputData="inputData"></modal-panel>
</div>

当我测试该代码时，所有方法都在工作，但 Modal.vue input 仍然没有绑定

【问题讨论】：

你是怎么触发你的方法modalData的？

标签： javascript vue.js vuejs2

【解决方案1】：

您必须使用 kebab-case 格式的道具，如下所示：

<modal-panel v-if="isModalActive" @close="toggleModal" :input-data="inputData"></modal-panel>

【讨论】：