Vue.js Vuejs从属性值或计算值将值绑定到v模型

我有一个作为组件的输入，并在主视图中呈现为：

然后我有一个组件视图，如下所示：

我正在运行一个计算方法来获取和设置数据，并且可以

console.log

，没有任何问题。在编辑状态下，我无法使用更新的计算状态填充

v-model

，因为我无法在渲染时声明为数据源

这是我的整个代码块：

//设置参数
导出默认值{
名称：'slug'，
道具：['value']，
//设置数据
数据（）{
const self=这个；
返回{
slugstr:“，
所需规则：[
（v） =>！！v | |'字段为必填项'，
],
}
},
观察：{
},
//获取更改计算机上要从组件返回的值
计算：{
鼻涕虫：{
得到（）{
返回此.value；
},
设置（val）{
//放子弹
this.slugstr=val；
this.slug=val；
//将数据发送回父级
此.$emit（'input'，val）
返回此.value；
}
}
},
安装的（）{
const self=这个；
//设置模板获取请求
},
方法：{
strtoslug：函数（值）{
this.slug=this.sanitizeSlug（值）；
},
sanitizeSlug:功能（标题）{
var slug=“”；
//改成小写
var titleLower=title.toLowerCase（）；
//字母“e”
slug=标题较低。替换（/e|é||ẽ|ẻ|ẹ|ê|ế|ề|ễ|ể|ệ/gi，‘e’；
//字母“a”
鼻塞=鼻塞。更换|ả|ạ|ă|ắ|ằ|ẵ|ẳ|ặ|â|ấ|ầ|ẫ|ẩ|ậ/gi，‘a’；
//字母“o”
鼻塞=鼻塞。更换（/o|ó|Ӛ|õ）|ỏ|ọ|ô|ố|ồ|ỗ|ổ|ộ|ơ|ớ|ờ|ỡ|ở|ợ/gi，‘o’；
//字母“u”
段塞=段塞。更换（/u||ӡӡũ）|ủ|ụ|ư|ứ|ừ|ữ|ử|ự/gi，‘u’；
//字母“d”
段塞=段塞。替换（/đ/gi，'d'）；
//删去最后的空白
slug=slug.replace（/\s*$/g'）；
//删除标点符号
slug=slug.replace（/[，\/\\！$%\^&\*；：{}=\`~（）]/g，“”；
//将空白更改为“-”
段塞=段塞。替换（/\s+/g，“-”）；
//返回格式化的str
回流段塞；
}
}
}

---

onchange

发生在

控制台.log

中，但我无法将其作为值呈现在

输入中。我做错了什么？
我不确定我是否完全理解您试图实现的目标，但这里有一些元素可以解决您的问题

我猜您希望父组件对子组件属性具有反应性，子属性由父组件更新。如果我错了，告诉我

此问题可能是由于setter函数中的
返回值造成的。
下面是一些与自定义组件一起使用的
v-model
代码

App.vue


从“/components/slug”导入slug；
导出默认值{
名称：“应用程序”，
数据（）{
返回{
输入数据：“你好”
};
},
组成部分：{
鼻涕虫
},
观察：{
输入_数据（）{
console.log（“父项：+this.input_数据”）；
}
}
};

slug.vue


{{value}}

导出默认值{
名称：“鼻涕虫”，
道具：[“价值”]，
计算：{
味精：{
get:function（）{
返回此.value；
},
设置：功能（val）{
这是.$emit（“输入”，val）；
}
}
}
};
您的计算属性有一个无限循环，因为它的setter会再次设置自身：

计算：{
鼻涕虫：{
设置（val）{
this.slug=val//