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

Posted

技术标签:

【中文标题】如何获取组件数据?如何从外部访问组件?【英文标题】: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 本身有很多方法可以获取输入文本值。

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

【讨论】:

以上是关于如何获取组件数据?如何从外部访问组件?的主要内容,如果未能解决你的问题,请参考以下文章

如何在组件外部访问React Context?

如何在 ReactJS 中从“外部”访问组件方法?

使用JavaScript从组件外部遍历本地DOM

使用 react-router-dom,如何从 React 组件外部访问浏览器历史对象?

如何访问组件外部的 react-redux 存储

如何从外部应用访问另一个应用中的contentprovider