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)
 }
}

Answer 2

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

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

    }
</script>

现在您的ID将可用，您可以做任何您想做的事情。

我只想提出一个建议：当您使用vue.js时，请尝试避免使用jquery获取输入值。在vue.js本身中，有很多方法可以获取输入文本值。

让我知道您是否还需要其他东西

如何获取组件数据？如何从外部访问组件？

2 个答案: