Javascript 自定义输入组件忽略方法的更新

我做了一个自定义输入组件，它工作正常，但有一个问题：当我试图从一个方法更新它的值时，模型被更新了，但输入值仍然存在

这是我的组件：

const基本输入={
模板：“”，
道具：['value']，
数据（）{
返回{
内容：这个值
}
},
方法：{
手动输入（e）{
this.$emit（'input'，this.content）
}
}
}
新Vue({
el:“#应用程序”，
数据：{name:''}，
组件：{BasicInput}，
方法：{
重新启动（）{
this.name=“”
}
}
})

---

您可以按重新启动按钮来了解我的意思。

您的代码中有一个错误：

props

，而不是

prop

但这还不够，您还需要手动更新

内容

，它不会与

值

属性发生反应。

数据

中声明的所有内容都不会与其初始值发生反应

const基本输入={
模板：“”，
道具：['value']，
数据（）{
返回{
内容：这个值
}
},
方法：{
手动输入（e）{
this.$emit（'input'，this.content）
}
},
观察：{
价值（val）{
this.content=val；
}
}
}

就像@NikitaK在他的回答中提到的那样，你在打字，你应该写

props

，而不是

prop

，但是我想给出一个简短的解决方案，而不使用

watcher

属性，只使用这个代码

@input=“$emit（'input'，$event.target.value）”

完整示例

const基本输入={
模板：``，
道具：['value']
}
新Vue({
el:“#应用程序”，
数据（）{
返回{
名称：“”
}},
组件：{BasicInput}，
方法：{
重新启动（）{
this.name=“”
}
}
})

正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
高度：100vh；
}

名称：{{Name}

重新启动

您的代码中有一个错误：

props

，而不是

prop