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

已更新至父组件访问子组件（$children/$refs）

This commit is contained in:
Code12121 2022-11-02 19:22:19 +08:00
parent 1333e767f1
commit e037f010f1
2 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
10-组件化开发/08-父子组件的访问/父组件访问子组件$children.html Normal file
View File

@ -0,0 +1,52 @@
<!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>
<button @click="Clickme()">点击我</button>
</div>
<template id="tpl">
<div>
<h1>这是子组件</h1>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
methods: {
Clickme(){
this.$children[0].ChildItems()
for (let i =0;i<this.$children[0].list.length;i++){
this.$children[0].list[i]=i+2-1/2
}
console.log(this.$children[0].list);
}
},
components:{
'apps':{
template:"#tpl",
data(){
return{
list:[0,1,2,3,5,6,7,3,1]
}
},
methods: {
ChildItems(){
let item=1
console.log("这是子组件函数");
console.log(this.list);
}
},
}
}
})
</script>
</html>

44
10-组件化开发/08-父子组件的访问/父组件访问子组件$ref.html Normal file
View File

@ -0,0 +1,44 @@
<!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 ref="first"></apps>
<button @click="refClick()">点击我</button>
</div>
<template id="tpl">
<div>
<h1>{{content}}</h1>
</div>
</template>
</body>
<script src="../../../JavaScript/vue.js"></script>
<script>
new Vue({
el:"#app",
methods: {
refClick(){
console.log(this.$refs.first.content);
this.$refs.first.content="这是被修改后的内容"
console.log(this.$refs.first.content);
}
},
components:{
'apps':{
template:"#tpl",
data(){
return{
content:"这是内容",
list:["这是第一条", "这是第二条", "这是第三条"]
}
}
}
}
})
</script>
</html>