vue.js入门(21)传值和传引用
传值:string number boolean传引用:object(对象) array(数组)引用:一旦你某个地方发生删除或者添加,整个都会进行改变!(不要忘记基础知识)1.传值,现在我们想要,App.vue里面的一个数值传到Header.vue文件里面首先我们先给App.vue里面一个String值data(){return{sendmessage:"传值用法,string..
传值: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文件里面添加这个数组两次,然后我们发现,点击上面一块的删除按钮,上下都会删除,这就是引用
(页面问题 图不能截全)
更多推荐
所有评论(0)