vue组件传值之$refs和$parentvue组件传值之$refs和$parent vue组件传值中有好多中方法比如p

vue组件传值之`$refs`和`$parent`

vue组件传值中有好多中方法比如`props` `emit`和`provide` `inject`还有利用中间vue实例`$on` `$emit`触发还有就是`vuex`,但是我们今天就先不讲这几种，我们来给大家讲讲`$refs`和`$parent`的通信方式

首先，定义一个父组件👴和一个子组件👶

// 父组件
<template>
  <div class="father">
    <h2>父组件</h2>
    <p>fInfo:{{ fInfo }}</p>
  </div>
</template>
<script>
import son from "./components/01.$refs和$parent_子组件.vue";
export default {
  name: "father",
  data() {
    return {
      fInfo: "父组件中的info属性"
    }
  }
}
</script>

// 子组件
<template>
  <div class="son">
    <h2>info:{{ info }}</h2>
  </div>
</template>
<script>
export default {
  name: "son",
  data() {
    return {
      info: "子组件中的info属性"
    };
  },
}
</script>

在父组件中导入注册并使用我们的子组件，给注册好的子组件添加自定义属性，同时在父组件中添加一个button按钮并添加一个点击事件👀

<template>
  <div class="father">
    <h2>父组件</h2>
    <p>fInfo:{{ fInfo }}</p>
    <button @click="getSon">获取子组件</button>
    <son ref="son"></son>
  </div>
</template>
<script>
// 导入
import son from "./components/01.$refs和$parent_子组件.vue"
export default {
methods: {
    getSon() {
       // 控制台输出，看是否能拿到子组件中的值
      console.log(this.$refs.son);
      console.log(this.$refs.son.info);
    }
  },
// 注册
components: {
    son
   }
</script>

点击按钮之后，很显然我们拿到了子组件的所有值

那我们能不能修改内部的值和方法呢？试一下吗，试过了就不是小孩子了🤭 那我们在子组件中再给个方法

methods: {
    sayHello() {
      console.log("子组件：“你好哦”");
    }
  }

父组件的点击事件中

getSon() {
      // 拿到子组件实例
      console.log(this.$refs.son);
      console.log(this.$refs.son.info);
      this.$refs.son.sayHello();
    }

果然通过$refs我们可以肆意的教训这个‘熊孩子’（修改子组件的值和调用子组件的方法）同样的，那我们作为儿子的，父亲老了，我们能不能帮忙改改内部的东西呢？二话不说，直接一串代码撸上去试试

直接在子组件中也加一个按钮用来获取父组件，在按钮上绑定一个点击事件，并且儿子长大了，也该尝试看看能不能给老父亲改善一下生活(修改一下父组件的属性并调用一下方法)

<template>
  <div class="son">
    <h2>info:{{ info }}</h2>
    <button @click="getFathter">$parent属性</button>
  </div>
</template>
export default {
  name: "son",
  data() {
    return {
      info: "子组件中的info属性"
    };
  },
  methods: {
    sayHello() {
      console.log("子组件：“你好哦”");
    },
    getFathter() {
      console.log(this.$parent);
      this.$parent.fInfo = "你儿子送了你五百万钞票，让你过潇洒点";
      this.$parent.sayHello();
    }
  }
};

可以看见，我们通过$parent也可以拿到并修改父组件中的值及调用内部方法

完整代码如下：

// 父组件
<template>
  <div class="father">
    <h2>父组件</h2>
    <p>fInfo:{{ fInfo }}</p>
    <button @click="getSon">获取子组件</button>
    <son ref="son"></son>
  </div>
</template>

<script>
import son from "./components/01.$refs和$parent_子组件.vue";
export default {
  name: "father",
  data() {
    return {
      fInfo: "老父亲很穷苦"
    };
  },
  methods: {
    sayHello() {
      console.log("父组件->sayHello");
    },
    getSon() {
      // 直接拿到子组件实例
      console.log(this.$refs.son);
      console.log(this.$refs.son.info);
      this.$refs.son.info = "你爹改了你的info!";
      this.$refs.son.sayHello();
    }
  },
  components: {
    son
  }
};
</script>

<style>
.father {
  padding: 20px;
  background-color: skyblue;
  overflow: hidden;
}
</style>

// 子组件
<template>
  <div class="son">
    <h2>info:{{ info }}</h2>
    <button @click="getFathter">$parent属性</button>
  </div>
</template>

<script>
export default {
  name: "son",
  data() {
    return {
      info: "子组件中的info属性"
    };
  },
  methods: {
    sayHello() {
      console.log("子组件：“你好哦”");
    },
    getFathter() {
      console.log(this.$parent);
      this.$parent.fInfo = "你儿子送了你五百万钞票，让你过潇洒点";
      this.$parent.sayHello();
    }
  }
};
</script>

<style>
.son {
  padding: 20px;
  background-color: orange;
}
</style>

总结

通过$refs和$parent我们可以实现父子组件中的通讯，老父亲年轻可以给你健康快乐的生活，作为儿子的我们有了能力之后也不要忘记家中的老父亲，他们也需要我们给他们添衣加物，让他们老有所养，老有所依。

附：

头一次发表文章，可能有很多不足，希望HXD们多多给我提出意见，后续我还会推出props emit,provde inject和中间vue实例创建的bus通过$on $emit实现还有就是用的很舒服的vuex(个人感觉😁)

vue组件传值之$refs和$parent