文章目錄

• • 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学习（组件传参）-学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。