Javascript 动态变化的道具_Javascript_Vue.js

Javascript 动态变化的道具

javascript vue.js

Javascript 动态变化的道具,javascript,vue.js,Javascript,Vue.js,在我的应用程序中，我有多个“上传”按钮，我想在用户单击该按钮时显示该特定按钮的微调器/加载器。上传完成后，我想删除该微调器/加载器我将按钮嵌套在一个组件中，因此在按钮的文件中，我从父级接收一个道具，然后将其存储在本地，这样加载程序就不会显示所有上载按钮。但当父对象中的值发生变化时，子对象无法获得正确的道具值 App.vue: <template> <upload-button :uploadComplete="uploadCompleteBoolean"

在我的应用程序中，我有多个“上传”按钮，我想在用户单击该按钮时显示该特定按钮的微调器/加载器。上传完成后，我想删除该微调器/加载器

我将按钮嵌套在一个组件中，因此在按钮的文件中，我从父级接收一个道具，然后将其存储在本地，这样加载程序就不会显示所有上载按钮。但当父对象中的值发生变化时，子对象无法获得正确的道具值

App.vue:

<template>
  <upload-button
    :uploadComplete="uploadCompleteBoolean"
    @startUpload="upload">
  </upload-button>
</template>

<script>
  data(){
    return {
      uploadCompleteBoolean: true
    }
  },

  methods: {
    upload(){
      this.uploadCompleteBoolean = false
      // do stuff to upload, then when finished,
      this.uploadCompleteBoolean = true
    }

</script>

<template>
  <button
    @click="onClick">
  <button>
</template>


<script>
  props: {
    uploadComplete: {
      type: Boolean
    }

  data(){
    return {
      uploadingComplete: this.uploadComplete
    }
  },

  methods: {
    onClick(){
      this.uploadingComplete = false
      this.$emit('startUpload')
    }

</script>


数据（）{
返回{
uploadCompleteBoolean:true
}
},
方法：{
上传（）{
this.uploadCompleteBoolean=false
//做一些要上传的东西，完成后，
this.uploadCompleteBoolean=true
}

按钮。vue:

<template>
  <upload-button
    :uploadComplete="uploadCompleteBoolean"
    @startUpload="upload">
  </upload-button>
</template>

<script>
  data(){
    return {
      uploadCompleteBoolean: true
    }
  },

  methods: {
    upload(){
      this.uploadCompleteBoolean = false
      // do stuff to upload, then when finished,
      this.uploadCompleteBoolean = true
    }

</script>

<template>
  <button
    @click="onClick">
  <button>
</template>


<script>
  props: {
    uploadComplete: {
      type: Boolean
    }

  data(){
    return {
      uploadingComplete: this.uploadComplete
    }
  },

  methods: {
    onClick(){
      this.uploadingComplete = false
      this.$emit('startUpload')
    }

</script>


道具：{
上载完成：{
类型：布尔型
}
数据（）{
返回{
uploadingComplete:this.uploadComplete
}
},
方法：{
onClick（）{
this.uploadingComplete=false
此.$emit（'startupboad'））
}

修复了事件名称和道具名称，然后它就可以工作了

如前所述，Vue建议事件名称始终使用kebab大小写。因此，您应该使用

this.$emit（'start-upload'）

，然后在模板中使用

如前所述

HTML属性名称不区分大小写，因此浏览器将解释任何大写字符都是小写的。这意味着当您使用在DOM模板中，camelCased道具名称需要使用其kebab-cased （以连字符分隔的）等价物

因此，将

：uploadComplete=“uploadCompleteBoolean”

更改为

：upload complete=“uploadCompleteBoolean”

编辑：刚刚注意到您提到的数据属性=上传完成

它很容易修复，为

props=uploadComplete

添加一块手表

下面是一个简单的演示：

Vue.config.productionTip=false
Vue.component（'上传按钮'{
模板：`Upload for Data:{{uploadingComplete}}}属性：{{{uploadComplete}}
`,
道具：{
上载完成：{
类型：布尔型
}
},
数据（）{
返回{
uploadingComplete:this.uploadComplete
}
},
监视：{//watch prop=uploadComplete，如果更改，则同步到数据属性=uploadingComplete
上传完成：函数（newVal）{
this.uploadingComplete=newVal
}
},
方法：{
onClick（）{
this.uploadingComplete=false
此.$emit（'start-upload'））
}
}
})
新Vue({
el:“#应用程序”，
数据（）{
返回{
uploadCompleteBoolean:true
}
},
方法：{
上传（）{
this.uploadCompleteBoolean=false
//做一些要上传的东西，完成后，
this.uploadCompleteBoolean=true
},
更改状态（）{
this.uploadCompleteBoolean=！this.uploadCompleteBoolean
}
}
})


切换状态{uploadCompleteBoolean}
状态：{uploadCompleteBoolean}