Блог

Главная - Вопросы по программированию - Как передать данные входного значения корневому элементу в Vue?

Как передать данные входного значения корневому элементу в Vue?

#javascript #vue.js

Вопрос:

Я хочу добиться передачи данных от компонента к корневому элементу в Vue. Я пытаюсь получить доступ к значению «заголовок» из корневого элемента с помощью метода. Когда код выполняется, консоль выдает мне значение «неопределенный» вместо значения «заголовок». Возможно ли это вообще с моей идеей?

 var app = Vue.createApp({
    props: ['handle'],
    components: ['custom-form'],
    methods: {
        showData: function() {
            console.log (this.handle)
            return this.handle
        }
    },
    created() {
        console.log (this.showData())
    }
})

app.component ('custom-form', {
    props: ['value'],
    template: `
        <h1>{{title}}</h1>
        <input type="text" v-model="inputValue" />
    `,
    data(){
        return {
            title: 'login'
        }
    },
    computed:{
        inputValue:{
            get(){ this.title },
            set(v){ this.$emit('update:inputValue',v) }
        }
    },
    methods: {
        handle(){
            return this.inputValue
        } 
    }
})

app.mount('#app')

Комментарии:

1. попробуйте использовать eventBus или vuex store

2. см.: v3.vuejs.org/guide/migration/v-model.html в принципе props: ['value'], , сейчас было props: ['modelValue'], бы и get(){ this.title }, было бы get() { return this.modelValue }, примером playcode.io/826186

3. np, я подумал, что я расширю пример. передача вещей может быть сложной поначалу, но как только вы это поймете, все станет довольно просто. если вы собираетесь иметь несколько вложенных вещей, или родитель имеет кучу детей, и дети должны иметь доступ вещах брата и сестры, то смотрите в vuex, избегать глобальных событий автобусов, как это взломать не использовать vuex, если vuex-это слишком много, вы всегда можете просто использовать миксин, который содержит сведения которая является наблюдаемой

4. Потратив несколько дней на то, чтобы понять кодирование Vue с вами и другими хорошими помощниками, я пришел к такому результату: jsfiddle.net/e2mnh4xa

Метки: