在做父子传值之前,我们先来看一下vue组件的引用传值:
在src目录下新建views文件文件夹,文件夹下新建Parent.vue与Child.vue做为父子组件传值的参照,这里利用VS Code的编辑工具编辑项目,VSCode中最好安装Vue VSCode Snippets这一个插件,这样我们就可以在vue页面输入vb选中第一个直接就把vue的样式框架代码生成进来。
先编写Parent.vue:
<template>
<div>
<h1>父文件内容</h1>
<m-child></m-child>
</div>
</template>
<script>
import MChild from './Child.vue' //引入子组件
export default {
components:{
MChild,
}
}
</script>
<style>
</style>
Child.vue:
<template>
<div>
<h2>子组件</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
App.vue在引入Parent.vue:
<template>
<div id="app">
<m-parent></m-parent> //这里遵循vue的命名规则
</div>
</template>
<script>
import MParent from './views/Parent'
export default {
components:{
MParent,
}
}
</script>
<style>
</style>
控制台就会将Parent.vue与Child.vue的内容全部打印出来。
下面是三种父子组件的传值方式:
props/$emit
$parent/children
$ref
一、props/$emit
方式
父向子传:
将上述的Parent.vue部分代码用v-bind绑定处理,修改如下:
<template>
<div>
<h1>父文件内容</h1>
<m-child v-bind:msg="'父向子传值'"></m-child>
</div>
</template>
Child.vue代码用props做接收处理:
<template>
<div>
<h2>子组件</h2>
<h3>{{msg}}</h3>
</div>
</template>
<script>
export default {
props:{
msg:{
type:String,
default: ''
}
}
}
</script>
最后运行出的结果会把所有信息都打印在页面上。
这里特别注意的是v-bind有一个简写的方式,就是将上述
v-bind:msg=" “的格式写成 :msg=” "
子向父传:
将Child.vue加上一个点击事件:
<button @click=“passMsg”>子向父传值
script修改代码如下:
<script>
export default {
props:{
msg:{
type:String,
default: ''
}
},
methods:{
passMsg(){
this.$emit('showMsg','hello') //传递自定义的事件和信息
}
}
}
</script>
Parent.vue的全部代码:
<template>
<div>
<h1>父文件内容</h1>
<m-child msg="父向子传值" @showMsg="showMsg"></m-child>
<h3>{{msg}}</h3>
</div>
</template>
<script>
import MChild from './Child.vue'
export default {
data(){
return{
msg: ''
}
},
components:{
MChild,
},
methods:{
showMsg(val){
this.msg = val
}
}
}
</script>
<style>
</style>
二、$parent/$children
传值
在这里拿子向父传值为例:
Child.vue中返回一个childMsg
data(){
return {
childMsg: 'child传值'
}
},
Parent.vue打印接收:
mounted(){
console.log(this.$children);
}
控制台输出:
三、$ref
在接收子组件上定义一个ref=“child”
Parent.vue中的代码:
<m-child msg="父向子传值" @showMsg="showMsg" ref="child"></m-child>
接收的格式要用$refs,如:
console.log(this.$refs.child);