父组件访问子组件
方法一:通过$children拿到子组件
在父组件中
console.log(this.$children);
方法二:通过给子组件加ref(我理解为给子组件一个标记),ref等号后面的内容相当于给子组件重命名,
并且在父组件中通过$refs拿到写了ref(有标记)的子组件
<cpn ref="c1"></cpn>
---
console.log(this.$refs.c1);
<!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">
<cpn ref="c1"></cpn>
</div>
<template id="cpn1">
<div>
<h2></h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const cpn = {
template:"#cpn1"
}
const app = new Vue({
el:"#app",
data: {
},
methods: {
},
components: {
cpn
},
mounted() {
console.log(this.$children);
console.log(this.$refs.c1);
}
})
</script>
</body>
</html>
方法三:子组件通过$emit发送信息给父组件
子组件触发事件的时候,被监听,并把信息传给父组件的方法
<cpn @send="getInfo" :pro1="message"></cpn>
//父组件中
getInfo(e){
console.log(e);
}
//子组件中
methods: {
add(){
this.$emit('send', this.info)
}
}
}
完整代码
<!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">
<cpn @send="getInfo" :pro1="message"></cpn>
</div>
<template id="cpn1">
<div>
<button @click="add">{{pro1}}</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const cpn = {
template:"#cpn1",
data() {
return {
info:"子组件的消息"
}
},
props:{
pro1:{
type:String,
default:"父组件未给消息"
}
},
mounted() {
},
methods: {
add(){
this.$emit('send', this.info)
}
}
}
const app = new Vue({
el:"#app",
data: {
message:"父组件的消息"
},
methods: {
getInfo(e){
console.log(e);
}
},
components: {
cpn
},
mounted() {
}
})
</script>
</body>
</html>
子组件访问父组件
方法一:通过$parent
方法二:通过props
在子组件中,可以自己配置props
props:{
pro1:{
type:String,
default:"父组件未给消息"
}
}
并且要在子组件中接收父组件的信息
<cpn @send="getInfo" :pro1="message"></cpn>