[JS][Vue]学习记录之引用传递和值传递

demo地址
因为一些特殊事情,断更了一天,可耻......还是要继续学习!

引用传递

在上一篇文章的demo中,我们从父组件向子组件传递了一个数组.这里引出一个概念,在vue中,数组和对象传递都是引用传递.举个栗子,在myComponent组件中我们给它加上一个点击事件,来改变users的值:

<template>
  <div class="myComponent">
    <ul>
      <li v-for="user in users">
        {{user}}
      </li>
    </ul>
    <button @click="deleteUser">删除一个人</button>
  </div>
</template>

<script>

export default
{
      name: 'myComponent',
        // props:["users"],
        props:{
          users:{
              type : Array,
              required : true
          }
        },

      data(){
        // noinspection JSAnnotator
  return{

      }
   },
  methods:{
    deleteUser:function (){
      this.users.pop();
    }
  }
}
</script>

这里给一个pop()函数来弹出最后一个user.
同时在app.vue中,我们再加上一个myComponent:

<template>
  <div id="app">
    <app-header v-bind:info="info"></app-header>
    <myComponent v-bind:users="users"></myComponent>
    <myComponent v-bind:users="users"></myComponent>
    <app-footer v-bind:info="info"></app-footer>
  </div>
</template>

然后会发现,当我们点击这个button之后,两个myComponent的值都会减少.这就能说明数组的传递是引用传递.

值传递

同理,我们可以去证明,凡是String,boolean,number类型的传递都是值传递.
这里贴一下header的代码,前提是header和footer都从app.vue传入了一个info字符串:

<template>
  <header>
    <h1>
      {{title}},{{info}}
      </h1>
    <button @click="changeInfo">改变info</button>
  </header>
</template>

<script>
export default
{
  name: 'app-header',
    props:{
      info:{
        type : String
      }
    },
    data(){
  // noinspection JSAnnotator
  return{
    title : '这是一个header'
  }
},
  methods:{
  changeInfo:function (){
    this.info = 'info 被改变了';
  }
}
}
</script>

我们会发现,当我们点击button之后,header的info确实改变了,但是footer没有改变.这里就证明,此时字符串传递是值传递.