Vue.js 访问组件的变量

我想访问一个组件变量。此变量由html输入修改

这是我目前的代码

家长：

<template>
   <component>Child</component>
</template>

<script>
export default {
    data () {
        return {
          dataChild : '',
    }
</script>

小孩
导出默认值{
数据（）{
返回{
数据子项：“”，
}

儿童：

<template>
    <input type="text" name="data" v-model="data" class="form-control">
</template>

<script>
  export default {
    data () {
      return {
          data: ''
      }
    }
  }
</script>

导出默认值{
数据（）{
返回{
数据：“”
}
}
}

我已经在互联网上搜索过了，但在我这方面没有任何效果，或者我做错了：(

---

提前感谢

在vue中，从子组件向父组件发送数据的标准方法是在子组件内部发出数据，并侦听父组件内部的事件。如下所示：

儿童：

export default {
  data: () => ({ dataChild: 'TEST' }),
  methods: {
    send () {
      this.$emit('data', this.dataChild)
    }
  },
  mounted () { this.send() }
}

家长：

<div>
  <child @data="get"></child>
</div>


export default {
  data: () => ({ data: '' }),
  methods: {
    get(value) {
      this.data = value
    }
  }
}

导出默认值{
数据：（）=>（{data:'}），
方法：{
获取（值）{
此参数=值
}
}
}

您可以像下面这样使用：

家长

<template>
    <component @input-child="childData"></component>
</template>
<script>
import Component from "@/components/Component";
export default {
   components: { Component },
   data() {
       return {
      dataChild: ""
   };
},
methods: {
    childData(data) {
       console.log(data);
      // you can assign it to dataChild variable
   }
  }
};
</script>

从“@/components/Component”导入组件；
导出默认值{
组件：{Component}，
数据（）{
返回{
数据孩子：“
};
},
方法：{
儿童数据（数据）{
控制台日志（数据）；
//您可以将其分配给dataChild变量
}
}
};

儿童

<template>
<input
    type="text"
    name="data"
    v-model="data"
    @input="$emit('input-child', data)"
    class="form-control"
 />
</template>

<script>
export default {
    data() {
        return {
            data: ""
        };
    }
};
</script>

导出默认值{
数据（）{
返回{
数据：“”
};
}
};

感谢您的帮助，不幸的是，它显示的是mouseevent，而不是数据。在parent中，您可以查看控制台日志并将其分配给parent data并使用它。