zoukankan      html  css  js  c++  java
  • Vue-cli中的组件(传参)

      vue-cli中组件之间的参数传递,只能是父组件向子组件传参。

      1、父组件app.vue的修改

      在父组件中的data中返回参数;在调用子组件时,进行数据绑定。

    <template>
      <div id="app">
      // 变红的'msgJsonAPP是用来和子组件传递的名称,需要与子组件接收名一致
        <HeaderVue :msgJsonApp="msgJson"></HeaderVue>
      </div>
    </template>
    
    <script>
    
    import HeaderVue from "./components/header";
    export default {
      name: "App",
      components: {
        HeaderVue
      },
      data(){
        return {
          msgJson:{msg: "头部传参",msgFlog: true}
        }
      }
    };
    </script>
    
    <style>
    
    </style>

      2、子组件接收参数并使用

      子组件中添加`props`参数用来接收父组件传递参数

    <template>
      <div>
        这是头部组件
        <p v-if="msgJsonApp.msgFlog">{{msgJsonApp.msg}}</p>
      </div>
    </template>
    <script>
    export default {
    // 此处msgJsonApp需要与父组件的一致
      props: ["msgJsonApp"],
    };
    </script>
    <style scoped>
    p {
      background-color: red;
    }
    </style>
  • 相关阅读:
    openwrt 的依赖找不到问题
    数据包与IPTABLE关系
    wifidog 配置中文说明
    Java 线程
    Java 集合
    IDEA配置Maven并创建web项目
    逻辑覆盖
    获得天气数据
    小程序项目文件介绍
    window 10 使用git
  • 原文地址:https://www.cnblogs.com/xshan/p/12369114.html
Copyright © 2011-2022 走看看