javascript - 如何将输入值数据传递给Vue中的根元素？

Question

我想在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')

标签： javascriptvue.js