Vue中点击按钮后如何在自定义组件动态展示输入框值

• 同名属性冲突：你在status-bar组件中同时声明了propsoutputData和data属性outputData，Vue中组件实例的data属性优先级高于props，外部传入的props会被内部data的初始空值直接覆盖，无法正常生效。
• 传值逻辑不匹配：你当前的代码同时保留了props传值和子组件方法赋值两种逻辑，没有和父组件的调用逻辑对齐，导致数据无法更新到视图。

方案1：使用props父传子（推荐，符合单向数据流规范） #

直接删除子组件中重复的data属性和doSomething方法，只保留props和模板即可：

productForm.component('status-bar', {
    props: ['outputData'],
    template: '<p v-html="outputData"></p>'
})

父组件对应调整：

1. 在父组件的data中定义用于传递的变量，比如formOutput
2. 点击Send按钮时，将表单输入的内容赋值给this.formOutput
3. 父组件模板中给子组件绑定属性：<status-bar :output-data="formOutput" />
   父组件值更新后子组件会自动同步视图。

方案2：调用子组件方法传值 #

删除子组件中多余的props声明，保留内部data和doSomething方法即可：

productForm.component('status-bar', {
    template: '<p v-html="outputData"></p>',
    data(){
        return {
            outputData: ''
        }
    },
    methods: {
        doSomething (data) {
            this.outputData = data
            console.log(this.outputData)
        }
    }
})

父组件对应调整：

1. 父组件模板中给子组件加ref标识：<status-bar ref="statusBar" />
2. 点击Send按钮时，通过ref获取子组件实例，调用doSomething方法传入表单数据：this.$refs.statusBar.doSomething(你的表单数据)

内容的提问来源于stack exchange，提问作者v01d