这次做一个综合性上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a1">
<cpna :number='num' @numchange='n1c'></cpna>
<!-- 绑定 子类数据 为 父传的值 ,格式为---》:子类数据(props中定义的)='父传的值(其实也是父类的数据)' -->
<h1>father-data{{num}}</h1>
</div>
<template id="cpn">
<div>
<!-- <input type="text" v-model="dnum"> -->
<!-- 上面是单纯的绑定修改父类传给子类的值在子类里面的值 -->
<input type="text" @input='numinput' :value='dnum'>
<h1>porps{{number}}</h1>
<h1>child-data{{dnum}}</h1>
</div>
</template>
<script src="vue.js"></script>
<script>
const app=new Vue({
el:'#a1',
data:{
num:0,
},
methods: {
n1c(value){
this.num=parseFloat(value);
},
},
components:{
'cpna':{
template:'#cpn',
props:{
number:Number,//在porps中定义要传的值的名称和简单类型检查
},
data() {
return {
dnum:parseFloat(this.number),
};
},
methods: {
numinput(event){
this.dnum=parseFloat(event.target.value);//自定义修改,用于改变child-data为string,从而出现0123这样的数据
// console.log(event.target.value);
console.log(typeof this.dnum);
this.$emit('numchange',this.dnum);
}
},
}
},
});
</script>
</body>
</html>
这个是绝对的重点,子传父,父传子,绑定,事件。几乎概括了之前的全部内容,做一个上传.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 父组件模板 -->
<div id="a1">
<!-- v-on:itemclick :itemclick其实是你自己在下面发射阶段自定义的事件 -->
<cpn1 @itemclick='cpnclick'></cpn1>
<!-- 这时候会默认把emit的参数对象给传过去 -->
</div>
<!-- 子组件模板 -->
<template id='cpn1'>
<div>
<button v-for="(item, index) in lists" :key="index" @click="itemclick(item)">{{item.name}}</button>
</div>
</template>
<script src="vue.js"></script>
<script>
//子组件
const cpn={
template:'#cpn1',
data(){
return {
lists:[
{id:'a1',name:'ump45'},
{id:'a2',name:'hk416'},
{id:'a3',name:'ak12'},
],
};
},
methods: {
itemclick(item){//目的是要把点击的对象传给父组件
//emit的翻译是发射
console.log(item);
//发射事件部分
this.$emit('itemclick',item);//前为名字后为参数
},
},
};
//父组件
const app=new Vue({
el:'#a1',
data:{
lis:'12aa',
},
components:{
cpn1:cpn,
},
methods: {
cpnclick(item){
console.log('123',item);
}
},
});
</script>
</body>
</html>
子传父相关初见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a1">
<cpn :clist='list' :cmess='mess'></cpn>
</div>
<template id="eee">
<div>
<h2>QAQ</h2>
<h1>{{clist}}</h1>
<p>{{cmess}}</p>
</div>
</template>
<script src="vue.js"></script>
<script>
const cpn={
template:'#eee',
//父传子--->props
// props:['clist'],//使用数组
props:{
clist:Array,//必须为数组类型(可以进行类型限制)
cmess:{
type:String,
default:'没有值传递过来',//当没有数据传递过来时候默认值
required:true,//设置为必传值
}
},
};
const app=new Vue({
el:'#a1',
data:{
mess:'123abc',
list:[1,12,'ump45',true],
},
components:{//翻译为组件,成分
cpn,//此处为增强写法简化,实际如下
// cpn:'cpn',
},
});
</script>
</body>
</html>
父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a1">
<cpn1></cpn1>
</div>
<template id="cpnc1">
<div>
<h2>{{d1}}</h2>
</div>
</template>
<script src="vue.js"></script>
<script>
// const obj={d1:0,};//是这里,返回指定对象,使得所有组件指向同一实例
Vue.component('cpn1', {
template:'#cpnc1',
data() {//请注意,data必须是一个返回(对象类型)的函数,里面保存着数据
return {//why函数?防止多个组件化共用一个数据(想象一下多个计数器)
//不用函数,每次创建新组件,指针永远指向最初始的地址,会导致数据混乱
//而使用函数,会确保每次都在返回值时候开辟新的内存空间,使得数据单独存储
//但是当你想要他们互相影响时候要怎么办呢?EASY
//看上面注释的代码,之后data函数返回obj就可以了
d1:'im came form far far away',
}
},
});//这就相当于一个简单的封装
const app=new Vue({
el:'#a1',
data:{
mess:'im robot',//组件是不能访问Vue实例里面的数据的!!,为此,我们要在注册组件时候加以定义
},
components:{
},
});
</script>
</body>
</html>
组件中使用数据WOW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="a1">
<cpn1></cpn1>
<cpn2></cpn2>
<cpn></cpn>
<cpn3></cpn3>
</div>
<!-- 第一种写法,使用 type="text/x-template" -->
<script type="text/x-template" id='cpnc'>
<div>
<h1>XAX</h1>
</div>
</script>
<!-- 第二种写法,使用template标签 -->
<template id="cpn3">
<div>
<h1>XOX</h1>
</div>
</template>
<script src="vue.js"></script>
<script>
//接下来是全局组件注册的语法糖
//构造注册全局组件一步到位
Vue.component('cpn1', {//记住要加引号
template:`<div><h1>QAQ</h1></div>`
});
//这里是分离之后的全局注册
Vue.component('cpn', {
template:'#cpnc',
});//把内容单独放在一个script里
Vue.component('cpn3', {
template:'#cpn3',
});//把内容单独放在一个tempate标签里
//接下来是局部组件构造的语法糖
const app=new Vue({
el:'#a1',
components:{
'cpn2':{
template:`<div><h1>x-x</h1></div>`,
}
},
})
</script>
</body>
</html>
分离components相关