zoukankan      html  css  js  c++  java
  • Vue 父组件主动获取子组件的值,子组件主动获取父组件的值

    父组件主动获取子组件的值

    1.

      在调用子组件的时候定义一个ref-> ref="header"
    2.
      在父组件中通过this.$refs.header.属性,调用子组件的属性,例如this.$refs.header.name
      在父组件中通过this.$refs.header.方法,调用子组件的方法,例如this.$refs.header.test()

    子组件主动获取父组件的值
    1.
      在子组件中通过this.$parent.属性,调用父组件的属性,例如this.$parent.name
      在子组件中通过this.$parent.方法,调用父组件的方法,例如this.$parent.test()

    示例代码

    <template>
    <div id="home">
        <v-header ref="header"></v-header>
        <h5>这是Home组件</h5>
        <button @click="getChildData()">通过ref调用子组件的方法</button>
    </div>
    </template>
    <script>
    import Header from "./Header.vue";
    export default {
      data() {
        return {
          msg: "我是父组件的属性"
        };
      },
      components: {
        "v-header": Header
      },
      methods: {
        run() {
          alert('我是父组件属性与方法');
        },
        getChildData(){
            console.log(this.$refs.header.msg);
            this.$refs.header.run()
        }
      }
    };
    </script>
    <style>
    </style>
    <template>
    <div id="home">
        <h2>这是Header组件</h2>
        <button @click="getParentData()">调用父组件属性与方法</button>
    </div>
    </template>
    <script>
    export default {
      data() {
        return {
          msg: "我是子组件的属性"
        };
      },
      methods: {
        run() {
          alert("我是子组件的方法");
        },
        getParentData(){
            console.log(this.$parent.msg)
            this.$parent.run();
        }
      }
    };
    </script>
    <style>
    </style>
  • 相关阅读:
    Leetcode:42. Trapping Rain Water
    Leetcode: 41. First Missing Positive
    Leetcode: 40. Combination Sum II
    多项式全家桶
    BZOJ 3878 [AHOI&JSOI2014]奇怪的计算器 (线段树)
    BZOJ 2959 长跑 (LCT+并查集)
    BZOJ 3028 食物 (生成函数+数学题)
    luogu P5504 [JSOI2011]柠檬
    hdu 6399 City Development
    luogu P3826 [NOI2017]蔬菜
  • 原文地址:https://www.cnblogs.com/chenyishi/p/9164285.html
Copyright © 2011-2022 走看看