zoukankan      html  css  js  c++  java
  • vue的组件之间传值方法

    父组件

    <template>
      <div>
        这是父组件
        <children v-bind:parentToChild="toChild" v-on:showChildMsg="formChild"></children>
        <!-- 使用vind:参数名 绑定传值,使用on:参数名 来监听接收子组件传来的信息-->
        {{showChildMsg}}
      </div>
    </template>
    
    <script>
    import children from "./children.vue";
    export default {
      name: "HelloWorld",
      data() {
        return {
            toChild:"父组件传值给子组件",
            showChildMsg:''
        };
      },
      methods: {
          formChild:function(data){
            //监听子组件子组件传值
            this.showChildMsg = data;
          }
      },
      components: { children }
    };
    </script>
    
    <style scoped>
    
    </style>

    子组件

    <style scoped>
    /* css */
    </style>
    <template>
      <div class id>
        {{parentToChild}}
        <br/>
        <button @click="goParent">点击向父组件传值</button>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      methods: {
        goParent: function() {
          this.$emit("showChildMsg", "这是子组件传值给父组件");
          //子组件 通过$emit函数向父组件传值,这个showChildMsg参数名对应的就是父组件里面的v-on:showChildMsg参数名
        }
      },
      activated() {},
      props: ["parentToChild"]
    };
    </script>
  • 相关阅读:
    2020-08-20
    2020-08-19
    2020-08-14
    2020-08-13
    使用numpy实现机器学习模型
    分治法学习
    2020-08-09
    2020-08-02
    四月是你的谎言下载
    新博客
  • 原文地址:https://www.cnblogs.com/huzhuhua/p/10212980.html
Copyright © 2011-2022 走看看