Vue组件（二）父组件、子组件通信/传值

一、Vue 父组件访问子组件

1.父组件获取子组件对象

通过ref引用属性访问子组件对象

定义：

使用：

     //获取子组件信息
      console.info(this.$refs["parentStu"]);

 

2.父组件调用子组件方法

     //父组件调用子组件方法
      this.$refs["parentStu"].change();

3.父组件传值给子组件 props  （重点，可以双向绑定）

1.子组件定义

  props: {
    num: {
      type: Number,
      default: 10,
    },
  },

2.父组件使用，重点parentNum 可以实现双向绑定

二、Vue 子组件访问父组件

1.获取父组件对象（重点，直接修改父组件变量，可以修改父组件页面展示）

this.$root

  //子组件获取父组件数据
      this.$root.parentNum += 10;

2.调用父组件方法

   //子组件调佣父组件 方法
      this.$root.parentChange();

3.给父组件传值

方案：1.调用子组件方法传值  2.使用props双向绑定传值

三、源码如下：

子组件：

父组件：

更多：

Vue组件（一）Vue组件基础_Vue组件入门

Vue3实现复制功能_vue-clipboard3 Vu3复制插件

Vue 无法展示网络图片处理方案