vue--父组件使用子组件里的方法和属性--$refs-ref、$el、$root三种属性+console.group

最新推荐文章于 2022-05-22 16:49:36 发布

咩有猫腻.

最新推荐文章于 2022-05-22 16:49:36 发布

阅读量343

点赞数

分类专栏： Vue 三-框架类

本文链接：https://blog.csdn.net/DcTbnk/article/details/107435300

版权

三-框架类同时被 2 个专栏收录

83 篇文章 0 订阅

订阅专栏

Vue

31 篇文章 0 订阅

订阅专栏

在这里插入图片描述

将组件的标签添加一个ref=“xxx” ，然后父组件使用子组件直接this.refs.xxx.xxx

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue中的ref</title>
  </head>
  <body>
    <div id="app">
      <h1>我是一个vue项目</h1>
      <div class="container" ref="c">
        <p ref="p">我是一句话</p>
        <hw ref="jj"></hw>
        <button @click="dddd">
          点击父组件的按钮，打印子组件的msg，同时调用子组件hw中的h方法
        </button>
      </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
      const hw = {
        template: `<div class="hw">
            <h5>我是一个自定义组件</h5>
            <hr/>
          </div>`,
        data() {
          return {
            msg: "动物园里有什么？",
          };
        },
        mounted() {
          console.group("hw组件");
          console.log(this.$root.$el);
          console.groupEnd();
        },
        methods: {
          h() {
            console.log("我是hw中的h方法");
          },
        },
      };
      new Vue({
        el: "#app",
        components: {
          hw,
        },
        created() {},
        mounted() {
          // $el 获取当前组件的dom元素
          // $refs 获取当前组件中设置了ref属性的标签
          // $root获取父组件的内容，如果没有父组件，显示自己的内容
          console.log(this.$el);
          console.log(this.$el.querySelector("p"));
          console.log(this.$refs);
          console.log(this.$refs.p);
          console.log(this.$root.$el);
        },
        methods: {
          dddd() {
            this.$refs.jj.h();
            console.log(this.$refs.jj.msg);
          },
        },
      });
    </script>
  </body>
</html>

咩有猫腻.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue--父组件使用子组件里的方法和属性--$refs-ref、$el、$root三种属性+console.group

将组件的标签添加一个ref=“xxx” ，然后父组件使用子组件直接this.refs.xxx.xxx<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue中的ref&.
复制链接

扫一扫