Vue学习（组件传参）-学习笔记

文章目录

Vue学习（组件传参）-学习笔记
- 父到子
- 子到父
- 父操作子-ref（类似于操作dom）
- 兄弟之间传参

Vue学习（组件传参）-学习笔记

父到子

Father:（index）

<template>
<div><Banner :img="img" /><table class="table"> <thead><tr ><th>用户姓名</th><th>用户性别</th><th>所在城市</th><th>操作</th></tr></thead><tbody><tr v-for="(v,i) in lists" :key="i"><td>{{v.name}}</td><td>{{v.sex}}</td><td>{{v.city}}</td><td><!-- 传入不同的标题 --><!-- <Btn :title="'修改'" /><Btn :title="'删除'" /><Btn :title="'详情'" /> --><!-- 传入多个属性 --><!-- <Btn :title="'详情'" :color="'red'" /><Btn :title="'删除'" :color="'blue'" /> --><!-- 传入对象 --><Btn :obj = "obj" /><Btn :obj = "obj2" /></td></tr></tbody></table>
</div>
</template><script>
import Btn from './Btn.vue'
import Banner from './Banner.vue'export default {name:'',data(){return{title:'标题',obj:{title:'修改',color:'green'},obj2:{title:'删除',color:'red'},lists:[{name:'张三1',sex:'男',city:'北京1',check:true},{name:'张三2',sex:'女',city:'北京2',check:false},{name:'张三3',sex:'男',city:'北京3',check:false},{name:'张三4',sex:'男',city:'北京4',check:false},{name:'张三5',sex:'女',city:'北京5',check:false},{name:'张三6',sex:'男',city:'北京6',check:false},{name:'张三7',sex:'男',city:'北京7',check:true},],img:[require("@/assets/img/1.jpg"),require("@/assets/img/2.jpg"),require("@/assets/img/1.jpg"),require("@/assets/img/2.jpg")]}},components:{Btn,Banner}
}
</script><style scoped>
ul {list-style-type:none;
}
.table{width: 70%;border-collapse: collapse;margin: 0 auto;text-align: center;
}
.table td,
.table th{border: 1px solid #ddd;padding: 10px;
}
.table thead tr {background:#1f76b3;color:#fff;
}
</style>

Son1:（Btn）

<template><button :style="{color:obj.color}">{{obj.title}}</button>
</template><script>
export default {name:'',data(){return{}},//父到子传递参数//props:['title','color','obj','event'],  //字符串数组写法props:{    //对象写法//title:String,//color:String,// title:{//   type:String,//   default:'标题'// }obj:{title:String,color:String}},methods:{}
}
</script><style scoped></style>

Son2:（Banner）（可将banner作为公共的）

<template><div class="banner"><img v-for="(v,i) in img" :key="i" :src="v" v-show="n==i"/><!-- <img src="@/assets/img/1.jpg"/>  --><div class="banner-circle"><ul><li  v-for="(v,i) in img" :key="i" :class="n==i?'selected':''"></li>  </ul> </div></div>
</template><script>
export default {name:'',props:{    //对象写法img:{}},data(){return{n:0,timer:null, //定时器// img:[//   require("@/assets/img/1.jpg"),//   require("@/assets/img/2.jpg")]}},methods:{autoPlay(){this.timer = setInterval(this.play,2000);},play(){this.n++;if(this.n>=this.img.length){this.n = 0;}}},mounted(){   //挂载完成this.autoPlay();},destroyed(){  //销毁clearInterval(this.timer)}
}
</script>

子到父

Son:（Btn）

<template><button @click="send()">按钮</button>
</template><script>
export default {name:'',data(){return{msg:'我是按钮组件'}},props:{    event:Function},methods:{send(){//this.$emit('e-child',this.msg);   //发射this.$emit('e-child',this.event);   //发射}}
}
</script>

Father:（index）

<template>
<div>{{title}}<table class="table"> <thead><tr ><th>用户姓名</th><th>用户性别</th><th>所在城市</th><th>操作</th></tr></thead><tbody><tr v-for="(v,i) in lists" :key="i"><td>{{v.name}}</td><td>{{v.sex}}</td><td>{{v.city}}</td><td><!-- 子传父  接收消息@e-child="acceptSon--><Btn  @e-child="acceptSon"/><!-- 子操作父的方法  :event="add" 传入父的方法-->  //就是把event传过去给子，子接收后再通过发射传回来父操作<Btn :event="add"  @e-child="acceptSon"/></td></tr></tbody></table>
</div></template><script>
import Btn from './Btn.vue'export default {name:'',data(){return{lists:[{name:'张三1',sex:'男',city:'北京1',check:true},{name:'张三2',sex:'女',city:'北京2',check:false},{name:'张三3',sex:'男',city:'北京3',check:false},{name:'张三4',sex:'男',city:'北京4',check:false},{name:'张三5',sex:'女',city:'北京5',check:false},{name:'张三6',sex:'男',city:'北京6',check:false},{name:'张三7',sex:'男',city:'北京7',check:true},]}},methods:{add(){this.title = 10;},acceptSon(d){  //接收子消息//this.title = d;  //d=msgd();}},components:{Btn}
}
</script><style scoped>
ul {list-style-type:none;
}
.table{width: 70%;border-collapse: collapse;margin: 0 auto;text-align: center;
}
.table td,
.table th{border: 1px solid #ddd;padding: 10px;
}
.table thead tr {background:#1f76b3;color:#fff;
}
</style>

父操作子-ref（类似于操作dom）

父（index）

<template>
<div>姓名：<input type='text' ref='input'/><h1 ref='h1'>{{title}}</h1><button @click="change()">按钮</button><div>子组件：<Btn :obj="obj" ref='btn'/></div></div></template><script>
import Btn from './Btn.vue'export default {name:'',data(){return{title:'标题',obj:{title:"按钮",color:"red"}}},methods:{change(){// console.log(this.$refs.btn);// this.title= 12432432;this.$refs.input.focus();this.$refs.h1.style.color='red';//this.title = this.$refs.btn.msg;//直接获取子组件中的属性this.title = this.$refs.btn.send(); //直接操作子组件中的方法}},components:{Btn}
}
</script>

子（Btn）

<template><button :style="{color:obj.color}" >{{obj.title}}</button>
</template><script>
export default {name:'',data(){return{msg:'我是按钮组件'}},//父到子传递参数//props:['title','color'],  //字符串数组写法props:{    //对象写法//title:String,//color:String,// title:{//   type:String,//   default:'标题'// }obj:{title:String,color:String},event:Function},methods:{send(){return 100}}
}
</script>

兄弟之间传参

父（index）- 中间桥梁作用

<template>
<div><h1>父组件：</h1><!-- 第一种：testB发射到父，父改变title值 --><!-- <testA :title="title"/> --><!-- <testB @e-child="acceptSon"/> --><!-- 第二种  ref 只能获取到B的值，不能修改--><testB ref='testB' /><testA :title="title"/>
</div>
</template><script>
import testA from './testA.vue'
import testB from './testB.vue'export default {name:'',data(){return{title:'123'}},mounted(){  //考虑到加载顺序，在testA取值时，testB还没有加载完，在等挂载完成后再赋值this.title = this.$refs.testB.title;},methods:{acceptSon(res){this.title = res;}},components:{testA,testB}
}
</script>

兄（testA）

<template>
<div>testA组件：{{title}}
</div>
</template><script>
export default {name:'',data(){return{//title:'testA'}},props:{  //父传子title:String}
}
</script>

弟（testB）

<template>
<div>testB组件：<input type="text" v-model="title" @input="send()"/>
</div>
</template><script>
export default {name:'',data(){return{title:'testB'}},methods:{send(){this.$emit('e-child',this.title);}}
}
</script>

Vue学习（组件传参）-学习笔记相关推荐

Vue 路由组件传参的 8 种方式
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
我的Vu啊（vue 2.0，数据监听，计算属性，组件传参）
提示:个人Vue学习工作总结 (持续更新中如果有不对的地方还请前辈多多指点) 文章目录 vue 计算属性 computed vue 数据监听 wacth 提示:以下是本篇文章正文内容,下面案例可供 ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
Vue-admin工作整理（四）：路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
【Vue3】第十四部分父子组件传参
[Vue3]第十四部分父子组件传参文章目录 [Vue3]第十四部分父子组件传参 14. 父子组件传参 14.1 父传子(props) 14.2 子传父(emit) 14.3 子传父(ref) 总 ...
子组件向父组件传参的几种方法
子组件向父组件传参的几种方法在用vue框架写项目的时候,多多少少会遇到子组件向父组件传参的方法.作为一个新手,确实让人头疼,于是便有了这篇小白写的总结,话不多说,开始! 以下方法全部基于这两个父子组 ...

Vue学习（组件传参）-学习笔记

文章目录

Vue学习（组件传参）-学习笔记

父到子

子到父

父操作子-ref（类似于操作dom）

兄弟之间传参

Vue学习（组件传参）-学习笔记相关推荐

最新文章

热门文章