Как получить данные компонента? Как получить доступ к компонентам снаружи? - PullRequest
Новая
       5

Как получить данные компонента? Как получить доступ к компонентам снаружи?

3 голосов
/ 01 ноября 2019

Я получаю компонент: 

<my-component> </my-component>

Вопрос в том, как получить свойства этого конкретного компонента, зная только его тег "my-component"?

Более подробное описаниепроблемы: Используя команду vue-cli-service build --target wc --name my-component my-component.vue, я компилирую в js файл

Затем я подключаю этот скрипт в заголовкеsite.

Тогда я использую компонент

Но как получить свойства этого компонента сейчас и вообще как получить доступ к этому компоненту? Как получить значение поля ввода в этом компоненте?

Извините, я, вероятно, плохо объяснил это.

Мне нужно что-то вроде этого: 

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

Ответы [ 2 ]

0 голосов
/ 02 ноября 2019 
<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>

Теперь ваш идентификатор будет доступен, и вы сможете делать все, что захотите.

Единственное предложение, которое я хотел бы дать: когда вы используете vue.js, попробуйте избежать jquery для получения ввода. стоимость. В самом vue.js есть много способов получить вводимое текстовое значение.

Дайте мне знать, если вам нужно что-то еще

0 голосов
/ 01 ноября 2019

использование 

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