Vue基础语法（四）
一、父组件向子组件通信
1、数组
（1）例一：选择城市，父组件的数据传递给子组件去显示
编写思路：
①通过v-for建立父组件，并绑定click点击事件传参获取城市
②定义一个city变量，存储获取的城市
③通过props:[]，自定义动态绑定名
④同时在父与子关联的cpn标签，进行v-bind动态绑定将父组件的变量city值传递给子组件自定义绑定名，子组件就可以直接通过使用自定义绑定名，直接显示父组件传递的城市
<body>
<div id="app">
<ul>
<li @click="btnClick(item,index)" v-for="(item,index) in cityArr">{{item}}</li>
</ul>
<cpn :show-city="city"></cpn>
</div>
<template id="cpn">
<div>
<h1>{{msg}}</h1>
<h2>{{showCity}}</h2>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
cityArr:['上海','重庆','天津','北京'],
city:'未选择城市'
},
methods:{
btnClick(item,index){
console.log(item,index);
this.city = item
},
},
components:{
cpn:{
template:'#cpn',
data(){
return {
msg:'我是子组件',
}
},
props:['showCity'],
}
}
})
</script>
</body> 
（2）例二：标题内容
<body>
<div id="app">
<cpn :title-name="title" :text="content"></cpn>
</div>
<template id="cpn">
<div>
<h1>{{titleName}}</h1>
<h3>{{text}}</h3>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
title:'父组件的标题',
content:'父组件的内容'
},
components:{
cpn:{
template:'#cpn',
props:['titleName','text']
}
}
})
</script>
</body> 2、对象（建议用这种，更严谨）
（1）例一：选择城市
<body>
<div id="app">
<ul>
<li @click="citySelect(item,index)" v-for="(item,index) in cityArr">{{item}}</li>
</ul>
<cpn :show-city="city"></cpn>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
<h3>{{showCity}}</h3>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
cityArr:['重庆','北京','天津','上海'],
city:'未选择城市',
},
methods:{
citySelect(item,index){
console.log(item,index);
this.city = item
}
},
components:{
cpn:{
template:'#cpn',
props:{
showCity:{
type:String,
default(){
return '未选择城市'
},
}
},
},
},
})
</script>
</body> <body>
<div id="app">
<cpn :title-name="title" :text="content"></cpn>
</div>
<template id="cpn">
<div>
<h1>{{titleName}}</h1>
<h3>{{text}}</h3>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
title:'父组件标题',
content:'父组件内容',
},
components:{
cpn:{
template:'#cpn',
props:{
titleName:{
type:String,
default(){
return '默认'
}
},
text:{
type:String,
default(){
return '默认'
}
},
},
},
},
})
</script>
</body> （3）注意：
①标签内无法正常识别大小写，通过v-bind动态绑定的属性要注意驼峰改成-格式
②传输的数据类型要一致，否则用对象严谨的方***报错
二、子组件向父组件通信
1、自定义方法
（1）格式：this.$emit('自定义方法名',参数1,参数2....)
（2）要求方法名用name-name的形式
2、选择城市
<body>
<div id="app">
<h1>{{showCity}}</h1>
<cpn @city-transfor="getCity"></cpn>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
<button @click="btnClick">城市传递</button>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
showCity:'未选择城市'
},
methods:{
getCity(city){
console.log(city);
this.showCity = city
}
},
components:{
cpn:{
template:'#cpn',
data(){
return {
city:{
name:'北京'
}
}
},
methods:{
btnClick(){
this.$emit('city-transfor',this.city.name)
}
}
},
},
})
</script>
</body> 三、父组件访问子组件
1、this.$children：返回的是数组
（1）方法使用
<body>
<div id="app">
<cpn></cpn>
<button @click="getChild">访问子组件</button>
</div>
<template id="cpn">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
new Vue({
el:'#app',
methods:{
getChild(){
console.log(this.$children);
},
},
components:{
cpn:{
template:'#cpn',
data(){
return {
msg:'我是子组件'
}
},
}
},
})
</script>
</body> 
（2）获取具体值
<script>
new Vue({
el:'#app',
methods:{
getChild(){
console.log(this.$children[0].msg);
},
},
components:{
cpn:{
template:'#cpn',
data(){
return {
msg:'我是子组件'
}
},
},
},
})
</script> 
（3）方法缺点举例
①当有多个子组件时，该方法无法访问具体某个子组件的内容
<body>
<div id="app">
<cpn2></cpn2>
<cpn1></cpn1>
<button @click="getChild">访问子组件</button>
</div>
<template id="cpn1">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<template id="cpn2">
<div>
<h1>{{str}}</h1>
</div>
</template>
<script>
new Vue({
el:'#app',
methods:{
getChild(){
console.log(this.$children[0].msg);
},
},
components:{
cpn1:{
template:'#cpn1',
data(){
return {
msg:'我是子组件1'
}
},
},
cpn2:{
template:'#cpn2',
data(){
return {
str:'我是子组件2'
}
},
},
},
})
</script>
</body> 
2、this.$refs：返回的是对象
注意：使用该方法时要与ref属性搭配，且这个方法可以避免什么数组出现的问题
<body>
<div id="app">
<cpn2 ref="cpn2"></cpn2>
<cpn1 ref="cpn1"></cpn1>
<button @click="getChild">访问子组件</button>
</div>
<template id="cpn1">
<div>
<h1>{{msg}}</h1>
</div>
</template>
<template id="cpn2">
<div>
<h1>{{str}}</h1>
</div>
</template>
<script>
new Vue({
el:'#app',
methods:{
getChild(){
console.log(this.$refs);
},
},
components:{
cpn1:{
template:'#cpn1',
data(){
return {
msg:'我是子组件1'
}
},
},
cpn2:{
template:'#cpn2',
data(){
return {
str:'我是子组件2'
}
},
},
},
})
</script>
</body> 
四、子组件访问父组件
1、this.$parent：返回的是对象
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
<button @click="getFather">访问父组件</button>
</div>
</template>
<script>
new Vue({
el:'#app',
data:{
msg:'我是父组件',
},
components:{
cpn:{
template:'#cpn',
methods:{
getFather(){
console.log(this.$parent);
},
},
},
},
})
</script>
</body> 
Vue的基础学习 文章被收录于专栏
Vue的基础语法，组件化开发，CLI，Vue-router，Vuex详解，网络封装，UI框架
投递数字马力等公司6个岗位
查看8道真题和解析