zoukankan      html  css  js  c++  java
  • Vue 父子组件传递数据

    Vue父组件给子组件传值:

    父组件:

    <template>
      <div class="father">
        {{ message }}
        <Son v-bind:message="message"></Son>
      </div>
    </template>
    
    <script>
    //导入Son组件
    import Son from "./Son";
    export default {
      name: "father",
      data() {
        return {
          message: "hello, father",
        };
      },
      components: {
        Son,
      },
      methods: {},
    };
    </script>
    

      

    子组件:

    <template>
      <div class="son">子元素: {{ message }}</div>
    </template>
    
    <script>
    export default {
      name: "son",
      props: {
        message: {
          type: String,
          default: "",
        },
      },
      data() {
        return {};
      },
    };
    </script>
    

    父组件传子组件,props是关键;

    Vue子组件给父组件传值:

     父组件:

    <template>
      <div class="father">
        <p>{{ message }}</p>
        <!-- @receiveData="receiveData"一定要写在子标签上 -->
        <Son v-bind:message="message" @receiveData="receiveData"></Son>
      </div>
    </template>
    
    <script>
    //导入Son组件
    import Son from "./Son";
    export default {
      name: "father",
      data() {
        return {
          message: "hello, father",
        };
      },
      components: {
        Son,
      },
      methods: {
        /**
         * 接收子组件数据
         */
        receiveData(message) {
          this.message = message;
        },
      },
    };
    </script>
    

      

    子组件:

    <template>
      <div class="son">
        <p>子元素: {{ message }}</p>
        <button @click="transferData">click</button>
      </div>
    </template>
    
    <script>
    export default {
      name: "son",
      props: {
        message: {
          type: String,
          default: "",
        },
      },
      data() {
        return {};
      },
      methods: {
        transferData() {
          //调用父组件接收子组件数据方法,传递数据
          this.$emit("receiveData", "son数据:hello, father!");
        },
      },
    };
    </script>
    

    子组件传父组件,emit方法是关键;

  • 相关阅读:
    libcurl的内存泄露的坑
    Linux 经典面试题(转)
    全栈项目|小书架|服务器开发-Koa2 全局异常处理
    强大的CompletableFuture
    如何进行kubernetes问题的排障
    Golang的json包
    JAVA面试题:Spring中bean的生命周期(转)
    建造者模式
    Netty学习篇④-心跳机制及断线重连
    Fabric1.4:手动启动 first-network 网络(三)
  • 原文地址:https://www.cnblogs.com/mxh-java/p/13462938.html
Copyright © 2011-2022 走看看