Vue的三种父子组件传值

在做父子传值之前，我们先来看一下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);