(精華2020年5月20日更新) vue教程篇 父子元件相互傳參

2b勿擾發表於2020-05-06
Vue元件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子元件傳參元件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="itapp">
        <!-- 父元件通過props向下傳遞資料給子元件 -->
        <!-- <my-world :message='msg' :name="name" v-on:e-world='getData()'></my-world> -->
        <my-world :message='msg' :name="name" @e-world='getData'></my-world>
        <h1>我是父元件</h1>
        <!-- {{testName}} -->
        <h2>訪問自己的資料：{{msg}}</h2>
        <h2>訪問到子元件的資料：{{testkk}}</h2>
    </div>

    
    <template id="world">
        <div>
            <h1>我是world元件</h1>
           <h2>訪問我自己的資料sex：{{sex}}</h2>
           <h2>訪問父元件中的資料： 
               {{message}} 
               {{name}}
               {{age}}
               {{user.username}}
            </h2>
            <button type="button" @click="send"> 將子元件的資料向上傳遞給父元件</button>
        </div>
    </template>
    <script>
        var childWorld = {
            // props:['message','name','age','user'],
            props:{
                //也可以為物件，允許配置高階設定，型別判斷，資料檢測，設定預設值
                message:String,
                name:{
                    type:String,
                    required:true
                },
                age:{
                    type:Number,
                    default:18,
                    validator:function(value){
                        return value>0
                    }
                },
                user:{
                    type:Object,
                    default:function(){
                        //物件或者陣列的預設值必須使用函式進行返回
                       return {
                        id:100,
                        username:'秋香'
                      }
                    }
                }
            },
            data(){
                return {
                    sex:'male',
                    height:'190',
                    testName:'測試',
                }
            },
            methods:{
                send(){
                    this.$emit('e-world',{
                        testName:this.testName,
                        sex:this.sex
                    })
                }
            },
            template:'#world'
        };


        var vm=new Vue({ //這裡的vm也是一個元件，稱為根元件Root ,父元件
			el:'#itapp',
			data(){
                return {
					msg:'黑客',
					name:'tom',
					age:23,
					user:{id:9527,username:'唐伯虎'},
					sex:'',
					height:'',
                    testkk:{}
				}
            },
            components:{
                //子元件
                'my-world':childWorld
            },
            methods:{
                getData(data){
                    this.testkk = data;
                    console.log('sss');
                }
            }
		});	

    </script>
</body>
</html>

父元件觸發子元件的方法傳參

<template>
    <div>
         <!--父盒子-->
    <div id="mainImgFrame" class="main-frame" >
        <!--單個盒子-->
        <div class="box" v-for="(item,index) in imgListArr" :key="index">
            <img  @click="bigImgFun(index)" v-lazy="winPicPath.small+item.picPath" />
        </div> 
    </div>
    <showBigImg :img-list-arr="imgListArr" ref="bigImgArr"></showBigImg>
    </div>
</template>
<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import {mapState} from 'vuex';
Vue.use(Lazyload);

export default {
    props:['imgListArr','imgNumCol'],
    data(){
        return {
        }
    },
    computed:{
        ...mapState(['winPicPath'])
    },
    methods:{
        bigImgFun(index) {
            this.$refs.bigImgArr.onChange(index);
        }
    }
}
</script>

<style lang="less">
.main-frame {
    height:auto;
    overflow: auto;
    position: relative;
    .box{
        float: left;
        box-sizing: border-box;
        overflow: hidden;
        width:49%;
        height: 120px;
        text-align: center;
        padding:5px;
    }
    .box img{
        margin:2%;
        display: block;
        width:100%;
        height: 100%;
        border:1px solid #dddddd;
    }
}


</style>

相關文章