testzm0476
/
vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

已更新至子组件向父组件传递

This commit is contained in:
Code12121 2022-10-27 11:26:32 +08:00
parent 5d10f250b8
commit ccc00f03fd
3 changed files with 120 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/props属性的使用.html
View File

@ -8,13 +8,16 @@
</head> </head>
<body> <body>
<div id="app"> <div id="app">
<apps :new_lists="list"> <apps :new_-lists="list">
<!--
v-bind标签是不支持驼峰标识，因此在v-bind中如果要是使用驼峰标识就必须使用-进行连接转译
-->
</apps> </apps>
</div> </div>
</body> </body>
<template id="tpl"> <template id="tpl">
<div> <div>
<h1>{{new_lists}}</h1> <h1>{{new_Lists}}</h1>
</div> </div>
</template> </template>
<script src="../../../JavaScript/vue.js"></script> <script src="../../../JavaScript/vue.js"></script>
@ -29,7 +32,7 @@
template:"#tpl", template:"#tpl",
// 1、props:['new_lists'] // 1、props:['new_lists']
props:{ props:{
new_lists:{ new_Lists:{
type:Array, type:Array,
default(){ default(){
return ['None'] return ['None']

61
10-组件化开发/07-父子组件的通信/07-1父组件向子组件的通信（props）/复习Props属性的使用（对象）.html Normal file
View File

@ -0,0 +1,61 @@
<!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="app">
<apps :tpl="list" ></apps>
</div>
<template id="tpl">
<div>
<h1 v-for="item in tpl">{{item.name}}</h1>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
const vue=new Vue({
el:"#app",
data:{
list:{
201:{
name:"张华",
age:"20",
glass:"2-1",
info:"none"
},
202: {
name: "张立勇",
age: "21",
glass: "2-2",
info: "无"
},
203: {
name: "张五十",
age: "27",
glass: "2-6",
info: "none"
}
}
},
components:{
'apps':{
template:"#tpl",
props:{
tpl:{
type:Object,
default(){
return {}
}
}
}
}
}
})
</script>
</html>

53
10-组件化开发/07-父子组件的通信/07-2子组件向父组件的通信（emit）/子组件向父组件传递数据.html Normal file
View File

@ -0,0 +1,53 @@
<!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="app">
<apps @emititem="ClickOn"></apps>
<!-- 在自定义事件中默认不写就是传递值，在dom中方法默认不写就是传递event对象 -->
</div>
<template id="tpl">
<div>
<button v-for="item in list" @click="ClickSubmit(item)">{{item.content}}</button>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
const vue=new Vue({
el:"#app",
methods:{
ClickOn(item){
alert(item.id+item.content)
}
},
components:{
'apps':{
template:"#tpl",
data(){
return {
list:[
{ id: 721, content: "热门推荐" },
{ id: 223, content: "手机数码" },
{ id: 653, content: "家用电器" },
{ id: 324, content: "电脑办公" },
//"热门推荐",'手机数码','家用电器','电脑办公'
]//注意格式：子组件中如果要返回任意内容，那么就必须创建一个data对象返回内容
}
},
methods: {
ClickSubmit(item){
this.$emit('emititem',item)//发射一个事件给父组件
}
},
}
}
})
</script>
</html>