root
/
admin_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changes

This commit is contained in:
Code12121 2022-11-03 11:20:44 +08:00
parent 9f70cf99ad
commit 7fcb9b872d
2 changed files with 98 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问根组件$root.html Normal file
View File

@ -0,0 +1,58 @@
<!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></apps>
</div>
<template id="tpl">
<div>
<h1>{{content}}</h1>
<h2>这是调用的内容：</h2>
<p v-for="items in root">{{items}}</p>
<button @click="btn()">调用根内容</button>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
item: [
{ id: 871, name: "《西游记》", author: "吴承恩", num: 0 },
{ id: 652, name: "《红楼梦》", author: "曹雪芹", num: 0 },
{ id: 123, name: "《巴黎圣母院》", author: "雨果", num: 0 },
{ id: 014, name: "《悲惨世界》", author: "雨果", num: 0 },
{ id: 025, name: "《UNIX编程艺术》", author: "Eric S. Raymond", num: 0 },
{ id: 036, name: "《计算机导论》", author: "王志强", num: 0 },
{ id: 017, name: "《战争与和平》", author: "列夫·托尔斯泰", num: 0 },
{ id: 022, name: "《三国演义》", author: "罗贯中", num: 0 },
]
},
components:{
'apps':{
template:"#tpl",
data(){
return {
content:"这是子组件",
root:[]
}
},
methods: {
btn(){
for(let item of this.$root.item){
this.root.push(item.name)
}
}
},
}
}
})
</script>
</html>

40
10-组件化开发/08-父子组件的访问/子组件访问父-根组件($parent-$root)/子组件访问父组件$parents.html Normal file
View File

@ -0,0 +1,40 @@
<!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">
{{content}}
<apps></apps>
</div>
<template id="tpl">
<div>
<button @click="btn()">按钮</button>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
content:"这是一个消息",
list: ['这是内容1', "这是内容2", "这是内容3"]
},
components:{
'apps':{
template:"#tpl",
methods: {
btn(){
this.$parent.content="这个消息来自子组件的操作"
}
},
}
}
})
</script>
</html>