vue系列文章（16）传值和传引用的类型和区别

父组件在向子组件进行传输内容的时候，如果传输的类型是array object，那么传递的是一个引用。如果父组件向子组件传递的是一个String,Number,boolean则传递的是一个值。下面对这两种情况进行代码演示。

在子组件里增加一个按钮修改传递的值的情况，观察两个组件的内容是否变化。

app.vue

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

<script>
//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  name: 'App',
  data () {
    return {
        users:[
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false},
          {name:"MiaoJie",position:"Web开发",show:false}
      ],
      title: "传递的是一个值，（number,string,boolean）"
    }
  },
  components: {
    "users": Users,
    "v-header": Header,
    "v-footer": Footer
  }
}
</script>

<style>

</style>

user.vue

<template>
  <div id="users">
    <ul>
      <li v-on:click="user.show = !user.show" 
        v-for="user in users">
        <h2>{{user.name}}</h2>
        <h3 v-show="user.show">
          {{user.position}}
        </h3>
      </li>
    </ul>
    <button v-on:click="deleteUser">删除</button>
  </div>
</template>

<!--
传值： string number boolean
引用： array object
-->
<script>
export default {
  // props: ["users"],
  //标准写法
  props: {
    users: {
      type: Array,
      required: true
    }
  },
  data(){
    return{
      
    }
  },
  methods:{
    deleteUser: function () {
      this.users.pop();
    }
  }
}
</script>

<style scoped>
#users{
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

ul{
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

li{
  flex-grow: 1;
  flex-basis: 300px;
  text-align: center;
  padding: 30px;
  border: 1px solid #222;
  margin: 10px;
}
</style>

header.vue

<template>
  <header v-on:click="changeTitle">
    <h1>{{title}}</h1>

  </header>
</template>

<script>
export default {
  name: 'Headers',
  props: {
  	title: {
  		type: String
  	}
  },
  data () {
  	return {
  	}
  },
  methods: {
  	changeTitle: function() {
  		this.title = "这是更改过后的title"
  	}
  }
}
</script>

<style scoped>
header {
	background: lightgreen;
	padding: 10px;
}
h1 {
	color: #222;
	text-align: center;
}
</style>

footer.vue

<template>
	<footer>
		<p>{{copywrite}}</p>
		{{title}}
	</footer>
</template>

<script>

export default {
  name: 'footer',
  props: {
  	title: {
  		type: String
  	}
  },
  data () {
  	return {
  		copywrite: "copywrite name is king dk"
  	}
  }
}
</script>

<style scoped>
footer{
	width: 100%;
	height: 40px;
	text-align: center;
	background-color: #000;
}
p {
	color: red;
	text-align: center;
}
</style>

通过上面的例子，users是一个数组，点击删除按钮后两个users子组件的内容都进行了变化，那么很明显传递的就一个引用。

但进行title传递的过程中，单击title进行修改title的值，只有一个组件的title进行改变，则很明显是传递的一个值。

   Vue系列文章目录 

1. vue系列文章（1）：对象绑定，属性绑定
2. Vue系列文章（2）事件绑定，鼠标点击事件
3. vue系列文章（3）：事件修饰符
4. Vue系列文章（4）键盘事件及键盘修饰符
5. vue系列文章（5）双向数据绑定
6. vue系列文章（6）计算属性computed
7. vue系列文章（7）动态CSS类型绑定
8. vue系列文章（8）条件渲染
9. vue系列文章（9）v-for条件循环
10. vue系列文章（10）vue实战项目demo
11. vue系列文章(11)：初始化多个实例对象
12. vue系列文章（12）初始组件的应用
13. Vue系列文章（13）vue cli脚手架
14. vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
15. vue系列文章（15）属性传值props
16. vue系列文章（16）传值和传引用的类型和区别
17. vue系列文章（17）利用事件传递将子组件值传递给父组件
18. vue系列文章（18）vue生命周期
19. vue系列文章（19）vue路由配置
20. vue系列文章（20） vue网络请求vue-resource

 如果上面文章对你有用，打赏下我吧@*@