传值: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文件里面添加这个数组两次,然后我们发现,点击上面一块的删除按钮,上下都会删除,这就是引用

(页面问题 图不能截全)


Logo

前往低代码交流专区

更多推荐