Vue的三种父子组件传值

「爱情、让人受尽委屈。」 2021-09-23 10:10 294阅读 0赞

在做父子传值之前，我们先来看一下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修改代码如下：

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);  
\}  
控制台输出：  
![在这里插入图片描述][20191028181222135.png]

**三、`$ref`**  
在接收子组件上定义一个ref=“child”  
Parent.vue中的代码：

<m-child msg="父向子传值" @showMsg="showMsg" ref="child"></m-child>

接收的格式要用$refs,如：

console.log(this.$refs.child);

[20191028181222135.png]: /images/20210923/7481e035fc754c55aae83f285a44b5df.png