VUE-Data对象始终作为引用传递，还是有时被复制？-前端问题

VUE - data object is passed as a reference always or sometimes it is copied?(VUE-Data对象始终作为引用传递，还是有时被复制？)

本文介绍了VUE-Data对象始终作为引用传递，还是有时被复制？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个与VUE相关的概念。

我对如何将数据传递给子VUE文件感到有点困惑。 (VUE实例？诚实地说，不熟悉这个术语)

在某些情况下，子VUE文件中的数据更改不会更改父项的数据当数据由"props"传递时。
另一方面，子VUE文件中的数据更改，实际上更改了父级的数据。

我刚刚遇到了案例2。这是数据通过Eventbus传递的时间。

我可以按如下方式理解此性质吗？

"数据仅在以下情况下作为引用传递数据通过Eventbus传递"

While，

"当数据通过道具传递时，数据将作为单独的副本传递到子级，子级中的更改不会更改父级中的原始数据"

我可以在路上看到Vue大自然吗？如果有人能给我举一个例子，说明子项中的更改不会影响父项中的数据，我将不胜感激。

每次我问与Vue相关的问题时，总是感到非常内疚，因为代码非常长，不同于单纯的Javascript问题。提前感谢您。

我刚才遇到的示例如下所示。

=main.js=

import Vue from 'vue'
import App from './App.vue'

export const serverBus = new Vue()
new Vue({
  el: '#app',
  render: h => h(App)
})

=Servers.vue=

<template>
    <div class="col-xs-12 col-sm-6">
        <ul class="list-group">
            <Server v-for='server in serverinfo' :serverinfo='server' :key='server.id'></Server>
        </ul>
    </div>
</template>

<script>

import Server from './server.vue'

export default {

 components: {
        Server
    },

data() {
    return {
                serverinfo: [
                {id:1, servno:'#1', servstat:'normal'},
                {id:2, servno:'#2', servstat:'critical'},
                {id:3, servno:'#3', servstat:'unknown'},
                {id:4, servno:'#4', servstat:'error'},
                {id:5, servno:'#5', servstat:'excellent'}]
               }
              }

    }



</script>

<style>

</style>

=server.vue=

<template>
  <li class='list-group-item' @click='serverselected'>
      Server {{serverinfo.servno}}
  </li>
</template>

<script>
import {serverBus} from '../../main.js'
export default {
    props:['serverinfo'],

    methods:{
        serverselected(){
            serverBus.$emit('serverselected', this.serverinfo)
        }
    }

}
</script>

<style>

</style>

=ServerDetails.vue=

<template>
    <div class="col-xs-12 col-sm-6">
        <p v-if='!server'>Please Select a server</p>
        <p v-else>Server {{server.servno}} is selected. Status:{{server.servstat}}</p>
        <button class="btn btn-primary" @click='backtonormal'>Back to Normal</button>
    </div>

</template>

<script>
import {serverBus} from '../../main.js'

export default{
    methods:{
        backtonormal(){
            this.server.servstat='normal'
        }
    },

    data(){
        return{
        server:null
              }
    },

    created(){
        serverBus.$on('serverselected',(server)=>{
            this.server=server
        })
    }

}
</script>

<style>

</style>

VUE-Data对象始终作为引用传递，还是有时被复制？

问题描述

推荐答案

基础教程推荐