vue-自定义组件值传递的示例说明

在项目中，我们经常会遇到定制组件的价值转移问题。方法很多，但原理很简单。以下文件总结了实际项目中使用的价值转移方法。

父组件将某个值传递给子组件，该值将在子组件中被修改，然后父组件需要获得一个新值

在Vue中，父组件和子组件之间的关系可以概括为道具向下传递和事件向上传递。父组件通过prop向子组件发送数据，子组件通过事件向父组件发送消息。

用户定义的组件值转移

一般道具活动

父组件

prop-event-value : address=' address ' @ update=' val=address=val ' key=' 4 '/prop-event-valuescriptimport Provent value from '。/components/Prop-event-value . vue ' export default { name : ' app '，components: { propeventvalue }，data(){ return { address : ' ' }/script subcomponent

template div propp-event/p label for=' address ' address/label input type=' text ' id=' address ' v-model=' temp address '/div/template script export default { name : ' prop-event '，prop 3360[' address ']，data(){ return { tempaddress : this . address } }，watch : { tempaddress(new val){ this。$ emit ('update '，newval)}}/script需要注意：不要在子组件中直接操作父组件的内容

组件实例的范围是独立的。每次更新父组件时，子组件的所有属性都会更新为最新值。这意味着父组件的数据不能(也不应该)在子组件的模板中被直接引用。如果您这样做，Vue将在控制台上发出警告。

导出默认{name:' prop-event '，prop :[' address ']，watch3360 {address (newval) {this。$ emit ('update '，newval)}}}如果上面的代码替换了子组件，内容将报告错误！

修饰语。同步

父组件

my-sync-value : address . sync=' address ' key=' 5 '/my-sync-value script import Mysync value from '。/components/My-sync-value . vue ' export default { name : ' app '，components: { mysyncvalue }，data(){ return { address : ' ' }/script subcomponent

template div pmy-sync/p label for=' address ' address/label input type=' text ' id=' address ' v-model=' temp address '/div/template script export default { name : ' my-sync '，prop 3360[' address ']，data(){ return { tempaddress : this . address }，watch : { temp address(new val){//必须是此update: address this。$ emit ('update: address '，new val)} } }/script prop-update :[prop]语法sugar。与prop-event相比的优点：父组件不需要监视事件@update='val=address=val '，而是自动监视update:[prop]事件。

双向数据绑定v模型

因此，要使组件的v型模型生效，它应该是(可从2.2.0配置):

接受价值主张

当有新值时触发输入事件，并将新值作为参数

父组件

my-v model-value v-model=' address ' key=' 6 '/my-v model-value script import myv model value from '。/components/My-v model-value . vue ' export default { name : ' app }，components 3360 { My v model value }，data(){ return { address : ' ' }/script subcomponent

template div pmy-v model/p label for=' address ' name/label input type=' text ' id=' address ' v-model=' temp address '/div/template script export default { name : ' my-v model '，prop 3360[' value ']，data(){ return { tempaddress : this . value } }，watch : { temp address(new val){//必须是inputthis。$ emit ('input '，newval)}}}/scriptprop-input语法sugar，默认情况下，父组件v-model侦听输入事件

需要注意的是，这里必须触发输入事件。当然，您也可以自定义v-model属性值和事件。请参考定制组件的v型

状态管理

通过商店传递值，这里将单独描述vuex。

单向数据流

如上所述，如果子组件内部更换了道具，Vue将在控制台发出警报。但是经常开发周静，我们会忍不住修改prop中的数据，比如：

将Prop作为初始值传入后，子组件希望将其用作本地数据；

Prop作为原始数据引入，由子组件处理成其他数据输出。

在这两种情况下，正确的回答是：

问题1:定义一个局部变量并用prop的值初始化它：

Props: ['initialcounter']，data : function(){ return { counter : this。initialcounter}}问题2:定义计算属性，处理prop的值并返回：

prop :[' size ']，computed : { normalize size : function(){ return this。size.trim()。tolower case ()}}}需要特别注意的是：在JavaScript中，对象和数组都是引用类型，指向同一个内存空间。如果prop是一个对象或数组，在子组件中更改它会影响

以上vue- custom组件传递值的例子说明了边肖分享的所有内容，希望能给大家一个参考和支持。