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

Posted 2023-02-23

【中文标题】如何获取组件数据？如何从外部访问组件？

【英文标题】：How to get component data? How to access the components from the outside?

【发布时间】：2020-02-27 20:27:23

【问题描述】：

我导出组件：

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

【问题讨论】：

你需要 v-model 绑定，在这里检查：vuejs.org/v2/guide/forms.html#Text

确保您的组件在使用 jquery 选择之前完成渲染。

【参考方案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)
 

【讨论】：

对不起，我可能没有解释清楚。我需要这样的东西： let inputValue = $("#my-component").find("input").val()

【参考方案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 本身有很多方法可以获取输入文本值。

如果您需要其他东西，请告诉我