vue.js - 如何获取组件数据？如何从外部访问组件？

Question

我导出组件:

<my-component> </my-component>

问题是如何获取这个特定组件的属性，只知道它的标签“my-component”？

问题的更详细描述:使用 vue-cli-service build --target wc --name my-component my-component.vue 命令，我在 js 文件中编译

然后我将此脚本连接到站点的标题中。

然后我使用该组件

但是现在如何获取这个组件的属性以及一般如何访问这个组件呢？如何获取该组件中的输入字段值？

抱歉，我可能没有解释清楚。

我需要这样的东西:

<my-component id="my-component"> </my-component>
<script>
let inputValue = $("#my-component").find("input").val();//but this not work
</script>

或者

<script>
let props = <my-component></my-component>// this component props
</script>

在 my-component.vue 文件中，以下代码:

<template>
    <input :placeholder="test" type="text" name="test" value="">
</template>

<script>
    export default {
        name: 'MyInputComponent',
        props: {
            placeholder: {
                type: String,
                default: "00"
            }
        },
        data () {
            return {
            }
        },

    }
</script>

Answer 1

使用

    <template>
        <input :placeholder="placeholder" type="text" @input="emitInputValue">
    </template>

    <script>
        export default {
            name: 'MyInputComponent',
            props: {
                placeholder: {
                    type: String,
                    default: "00"
                }
            },
            methods: {
              emitInputValue ($event) {
              this.$emit('input', $event.target.value)
              }
           }

        }
    </script>

get value
<my-component @input"getValue"> </my-component>

methods: {
 getValue (payload) {
  console.log(payload)
 }
}