Как динамически менять свойства компонента в vue за его пределами?

Question

[Макс Жуков]

Дан код который меняет props компонента динамически, но вот он меняет их через свойства el #app.

<div id="app">
        <input type="text" v-model="width">
        <br>
        <br>
        <input type="text" v-model="height">
        <br>
        <br>
        <br>
        <br>
        <br>
        <test :width="width" :height="height"></test>
    </div>
    <script>
    Vue.component('test', {
        template: '<div><input :value="width" type="text"><br><br><input :value="height" type="text"></div>',
        props: ['width', 'height']
    })
    new Vue({
        el: '#app',
        data: {
            width: 0,
            height: 0
        }
    });
    </script>

Можно ли менять свойства компонента и без свойст в el #app? Как например вот так как-нубудь:

<div id="app">
        <input type="text" v-model="width(чтобы бралось с компонента как-нибудь)">
        <br>
        <br>
        <input type="text" v-model="height(чтобы бралось с компонента как-нибудь)">
        <br>
        <br>
        <br>
        <br>
        <br>
        <test></test>
    </div>
    <script>
    Vue.component('test', {
        template: '<div><input :value="width" type="text"><br><br><input :value="height" type="text"></div>',
            data: function(){
       return{
         width:0,
         height:0
         } 
       }
    })
    new Vue({
        el: '#app'
    });
    </script>

Comments

[ой всё]

а вот это вы зачем сюда написали? без него код не работает?

<br>
        <br>
        <br>
        <br>
        <br>

[Макс Жуков]

ой всё, я не писал, а скопировал у себя

[ой всё]

Макс Жуков,
так сюда зачем? это критическая часть вашего гениального кода?

[Макс Жуков]

ой всё, Вы можете ответить по вопросу или только обращаете внимание на такие мелочи?

[ой всё]

Макс Жуков, так я пыталась уточнить, что у вас является существом, а вы так и не ответили
колупайтесь сами, раз считаете, что можете требовать помощи в таком тоне

[Макс Жуков]

ой всё, Где именно в первом ответе вы пытались уточнить что является существом? И что вообще за существо? Всё что было, то я и написал то что знал.

[ой всё]

Макс Жуков, вот с самого первого ответа и пытаюсь выяснить, а вы понятия не имеете
все, что я смогла выяснить, что вы не понимаете, что вы пишете в коде, хамите, и поэтому смысла вам помогать особого нет

[Макс Жуков]

ой всё, Почему бы вам не поучиться у Evgeny Kulakov, который ответил без

а вот это вы зачем сюда написали? без него код не работает?

.
Не вижу смысла продолжать диалог, а вы и дальше можете обращать внимание на br вместо того чтобы ответить и всё. В вопросе я вроде всё ясно обьяснил. Ну то что я написал в коде то я понимаю.

[ой всё]

Макс Жуков, ну если бы понимали, то у вас бы не было вопросов по этому коду, это очевидно

Answer 1

[Evgeny Kulakov]

В компоненте test добавьте секцию data и в ней пропишите эти свойства.

Comments

[Макс Жуков]

Хорошо, а как вызввать то что в этой date за пределами компонента через v-model?

[Evgeny Kulakov]

Макс Жуков, а что вы хотите?) С одной стороны избавляетесь от переменных в родительском компоненте, с другой, хотите опять использовать v-model и переменные в родительском компоненте?

[Макс Жуков]

Evgeny Kulakov, Я хочу чтобы менялись свойства или data из компонента вне этого компонента, без использование переменных в родителе, а только в компоненте. Если конечно такое возможно?)

[Evgeny Kulakov]

Макс Жуков, храните переменные внутри компонента, при их изменении отправляйте событие наружу:

Vue.component('test', {
        template: 
          '<div>
            <input :value="width" type="text" @input="setWidth">
            <input :value="height" type="text" @input="setHeight">
          </div>',
            data: function(){
              return{
                width:0,
                height:0
              } 
           },
           methods: { 
             setWidth(e) {
               this.width = e.target.value
               this.$emit('onWidth', this.width)
             },
             setHeight(e) {
               this.height = e.target.value
               this.$emit('onHeight', this.height)
             }
           }
    })

[Макс Жуков]

Evgeny Kulakov, Вы немножко не правильно поняли). Мне нужно наоборот, когда я ввожу в input который находится в el:#app чтобы менялись значения в input которые находятся в компоненте.

[Evgeny Kulakov]

Макс Жуков, можно, только зачем) можно по событию изменения значения в поле родителя вызывать метод компонента, который будет устанавливать соответствующее значение в нужное поле.

[Макс Жуков]

Ну у меня просто в проекте вызывается компонент, и он находится в родителе, в котором есть поля, в которые я ввожу инфу и в компоненте должно меняться как настройка. Я немного не понял как в input родителя передать метод компонента?

[Evgeny Kulakov]

Макс Жуков, исходя из вашей задачи нормально хранить данные в родителе и передавать их через пропсы в компонент, где они будут отображаться.
Про то, что я писал можно сделать так:

Vue.component('test', {
        template: 
          '<div>
            <input :value="width" type="text">
            <input :value="height" type="text">
          </div>',
            data: function(){
              return{
                width:0,
                height:0
              } 
           },
           methods: { 
             setWidth(v) {
               this.width = v
             },
             setHeight(v) {
               this.height = v
             }
           }
    })

Код родителя:

<input type="text" @input="$refs.test.setWidth($event.target.value)">
  <input type="text" @input="$refs.test.setHeight($event.target.value)">
  <test ref="test"></test>

Но это извращение имхо, есть стандартный подход передачи через пропсы, к тому же следует избегать использования ref ссылок.