Vue的三种父子组件传值

在做父子传值之前，我们先来看一下vue组件的引用传值：
在src目录下新建views文件文件夹，文件夹下新建Parent.vue与Child.vue做为父子组件传值的参照,这里利用VS Code的编辑工具编辑项目，VSCode中最好安装Vue VSCode Snippets这一个插件，这样我们就可以在vue页面输入vb选中第一个直接就把vue的样式框架代码生成进来。
先编写Parent.vue：

Child.vue:

App.vue在引入Parent.vue:

控制台就会将Parent.vue与Child.vue的内容全部打印出来。

下面是三种父子组件的传值方式：
props/$emit
$parent/children
$ref

一、props/$emit方式
父向子传：
将上述的Parent.vue部分代码用v-bind绑定处理，修改如下：

Child.vue代码用props做接收处理：

最后运行出的结果会把所有信息都打印在页面上。
这里特别注意的是v-bind有一个简写的方式，就是将上述
v-bind:msg=" “的格式写成 :msg=” "
子向父传：
将Child.vue加上一个点击事件：
子向父传值
script修改代码如下：

Parent.vue的全部代码：

二、$parent/$children传值
在这里拿子向父传值为例：
Child.vue中返回一个childMsg

   data(){
          return {
            childMsg: 'child传值'
          }
      },

Parent.vue打印接收：
mounted(){
console.log(this.$children);
}
控制台输出：

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

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

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