vue中ref的使用，vue兄弟组件如何传值，es6reduce专门做条件统计

前端交互仔

已于 2022-10-10 21:08:28 修改

阅读量275

点赞数

分类专栏：前端(HTML 文章标签： vue.js javascript 前端

于 2021-11-11 22:56:43 首次发布

原文链接：https://www.cnblogs.com/renzm0318/p/8762129.html

版权

前端(HTML 专栏收录该内容

235 篇文章 3 订阅

订阅专栏

在这里插入图片描述

数据在哪里，操作数据的方法就应该在哪里。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> -->
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> -->
    <title>Document</title>
  </head>
  <body>
    <div id="ref-outside-component" v-on:click="consoleRef">
      <component-father ref="outsideComponentRef"></component-father>

      <p>ref在外面的组件上</p>
    </div>
    <script>
      var refoutsidecomponentTem = {
        template: "<div class='childComp'><h5>我是子组件</h5></div>",
      };

      var refoutsidecomponent = new Vue({
        el: "#ref-outside-component",

        components: {
          "component-father": refoutsidecomponentTem,
        },

        methods: {
          consoleRef: function () {
            console.log(this); // #ref-outside-component    vue实例

            console.log(this.$refs.outsideComponentRef); // div.childComp vue实例，组件实例
          },
        },
      });
      refoutsidecomponent.consoleRef();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <!-- ref在里面的元素上--全局注册 -->
    <div id="ref-inside-dom-all">
      <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
    </div>
  </body>
  <script>
    Vue.component("ref-inside-dom-quanjv", {
      template:
        "<div class='insideFather'> " +
        "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
        "  <p>ref在里面的元素上--全局注册 </p> " +
        "</div>",
      methods: {
        showinsideDomRef: function () {
          console.log(this); //这里的this其实还是div.insideFather
          console.log(this.$refs.insideDomRefAll); // <input  type="text">
        },
      },
    });

    var refinsidedomall = new Vue({
      el: "#ref-inside-dom-all",
    });
  </script>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <!-- ref在外面的元素上 -->
    <div id="ref-outside-dom" v-on:click="consoleRef">
      <component-father> </component-father>
      <p ref="outsideDomRef">ref在外面的元素上</p>
    </div>
  </body>
  <script>
    var refoutsidedomTem = {
      template: "<div class='childComp'><h5>我是子组件</h5></div>",
    };
    var refoutsidedom = new Vue({
      el: "#ref-outside-dom",
      components: {
        "component-father": refoutsidedomTem,
      },
      methods: {
        consoleRef: function () {
          console.log(this); // #ref-outside-dom    vue实例
          console.log(this.$refs.outsideDomRef); //  <p>标签dom元素 ref在外面的元素上</p>
        },
      },
    });
    refoutsidedom.consoleRef();
  </script>
</html>

转自：https://www.cnblogs.com/renzm0318/p/8762129.html

前端交互仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中ref的使用，vue兄弟组件如何传值，es6reduce专门做条件统计

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--
复制链接

扫一扫