IDEA激活码
目录
1.父访子
在父组件里拿到子组件里的属性和方法
①$children(用的较少)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<button @click="btnClick">按钮</button>
</div>
</div>
<template id="cpn">
<div>
<h2>你我心境，都要四季如春</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
methods: {
btnClick(){
console.log(this.$children);
for(let c of this.$children){
console.log(c.name);
c.showMessage();
}
}
},
components: {
cpn: {
template: `#cpn`,
data() {
return {
name: '我是子组件的name'
}
},
methods: {
showMessage(){
console.log("showMessage");
}
}
}
}
})
</script>
</body>
</html>
点击按钮，控制台显示：
缺点：
我上面一共放了3个子组件，我现在想要拿到第3个组件的name属性
我要这样写：console.log(this.$children[2].name);
但是如果以后我根据需求，在第3个子组件前面又加了几个子组件
那么，这个时候，我再用this.$children[2].name，拿到的就不是原来的那个子组件了
②$refs
能够拿到指定的子组件，只要在子组件里加个ref属性作为标识
this.$refs默认是一个空的对象，子组件加了ref属性，才会在空对象里面追加其它属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<cpn ref="aaa"></cpn>
<cpn ref="bbb"></cpn>
<cpn ref="ccc"></cpn>
<button @click="btnClick">按钮</button>
</div>
</div>
<template id="cpn">
<div>
<h2>你我心境，都要四季如春</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
methods: {
btnClick(){
console.log(this.$refs);
console.log(this.$refs.aaa.name);
}
},
components: {
cpn: {
template: `#cpn`,
data() {
return {
name: '我是子组件的name',
}
},
methods: {
showMessage(){
console.log("showMessage");
}
}
}
}
})
</script>
</body>
</html>
2.父访子
在子组件中
访问父组件用$parent属性
访问根组件$root属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是cpn组件</h2>
<button @click="btnClick">按钮</button>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<h2>我是ccpn组件</h2>
<button @click="btnClick2">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'你好啊！'
},
components:{
cpn: {
template: `#cpn`,
data(){
return {
name: '我是cpn组件里面的name'
}
},
methods: {
btnClick(){
//访问父组件$parent
console.log(this.$parent)
},
},
components: {
ccpn: {
template: `#ccpn`,
methods: {
btnClick2() {
//访问父组件$parent
console.log(this.$parent)
console.log(this.$parent.name)
//访问根组件$root
console.log(this.$root)
console.log(this.$root.message)
}
}
}
}
}
}
})
</script>
</body>
</html>
按第一个按钮显示：
按第二个按钮显示：
