<!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>
