Vue 父子组件的访问方式
2020-05-13 本文已影响0人
稳小情
父组件访问子组件:使用 
refs
- $children使用的不多,只有想拿到所有子组件的时候才会用
- $refs =>对象类型，默认是一个空的对象
下面则是实例！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn ref="aaa"></cpn> <!--ref=aaa可以指定！而children是想拿到所有子组件的时候才会用--->
<button @click="dianji">点击</button>
</div>
<template id="cpn">
<div>我是子组件</div>
</template>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
dianji:function(){
console.log(this.$refs.aaa.name) //父子访问子组件
}
},
components:{
cpn:{
template:'#cpn',
data(){
return{
name:"这个哦"
}
}
}
}
})
</script>
</body>
</html>
子组件访问父组件:使用
root
下面会有实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h1>我是父组件</h1>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h4>这里是我们的子组件</h4>
<button @click="eclick">{{mmm}}</button>
</div>
</template>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"这里是内容是我自己让直接访问根组件的某个部分的"
},
components:{
cpn:{
template:'#cpn',
data(){
return{
name:"这里是测试的"
}
},
components:{
ccpn:{
template:'#ccpn',
data(){
return{
mmm:"稳小情"
}
},
methods:{
eclick(){
//1.访问父组件$parent
//console.log(this.$parent);
//console.log(this.$parent.name);
//2.访问根组件
//console.log(this.$root);
//console.log(this.$root.message)
}
}
}
}
},
}
})
</script>
</body>
</html>
