vue.js入门（21）传值和传引用

传值：string number boolean

传引用：object（对象）    array（数组）

引用：一旦你某个地方发生删除或者添加，整个都会进行改变！（不要忘记基础知识）

1.传值，现在我们想要，App.vue里面的一个数值传到Header.vue文件里面

首先我们先给App.vue里面一个String值

data(){
  return{
  	sendmessage:"传值用法，string，number，boolean"
  }},

然后在template里面种绑定一下传过去

<appheader v-bind:sendhea="sendmessage"></appheader>

然后在Header.vue文件里面接收

<script>
export default {
  name: 'appheader',
  data () {
    return {
    	title:"vue.js demo"
    }
  },
  props:{
    sendhea:{
      type:String
    }
  }
}
</script>

记得类型是String而不是string，然后就可以通过调用sendhea来使用这个数据了

<h1>{{ title }}--{{ sendhea }}</h1>

效果图：

然后现在我们讲这两者的区别

1.传值

如果现在，我在Header.vue和Footer.vue文件里面同时传过去了这一句话，然后我们都显示出来，在Header.vue里面添加一个点击事件，一旦点击这句话就会变成“改变啦！”，然后这个时候，头部显示出来的效果就是vue.js demo -- 改变啦，但是尾部仍然是vue.js demo --传值用法，string，number，boolean，这就是传值，不会发生改变

2.引用

如果我们在User.vue里面添加一个点击事件，对当前数组点击一下，出栈一个，出栈代码：

methods:{
  deleteuser:function()
  {
  	this.user.pop();
  }
  }

然后我们在App.vue文件里面添加这个数组两次，然后我们发现，点击上面一块的删除按钮，上下都会删除，这就是引用

（页面问题 图不能截全）