(精华2020年5月20日更新) 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>

你可能感兴趣的:((持续更新)vue基础篇,vue.js)