zoukankan      html  css  js  c++  java
  • vue prop

    传静态的属性

    子组件:

    <template>
      <div>
        <h1>{{ msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      props: ["msg"]
    }
    </script>
    

    父组件:

    <template>
      <div id="app">
        <HelloWorld msg="hello"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      }
    };
    </script>
    

    好了,这样就完成了一个最简单的使用prop接收父元素的值

    传动态字符串

    子组件

    <template>
      <div>
        <h1>{{ msg }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      props: ["msg"]
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld :msg="hello"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {
          hello: "hello world"
        }
      }
    };
    </script>
    

    可以看到,子组件我未做任何修改,只是在父组件做了一些修改

    传动态数组

    子组件

    <template>
      <div>
        <ul>
          <li v-for="item in msg" :key="item">
            {{ item }}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props: ["msg"]
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld :msg="hello"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {
          hello: ["aa", "bb", "cc"]
        }
      }
    };
    </script>
    

    传动态对象

    子组件

    <template>
      <div>
        <h1>{{ msg.id }}</h1>
        <h2>{{ msg.name }}</h2>
      </div>
    </template>
    
    <script>
    export default {
      props: ["msg"]
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld :msg="hello"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {
          hello: {
            id: 1,
            name: "hello dj"
          }
        }
      }
    };
    </script>
    

    对prop的状态进行验证

    prop的状态可以为

    • String
    • Number
    • Boolean
    • Array
    • Object
    • Date
    • Function
    • Symbol
      下面进行演示
      子组件
    <template>
      <div>
        <h1>{{ num }}</h1>
        <h1>{{ msg }}</h1>
        <h1>{{ obj.id }}</h1>
        <h2>{{ obj.name }}</h2>
        <ul>
          <li v-for="item in arrs" :key="item">
            {{ item }}
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        num: {
          type: Number
        },
        msg: {
          type: String
        },
        arrs: {
          type: Array
        },
        obj: {
          type: Object
        }
      }
    }
    </script>
    

    父组件

    <template>
      <div id="app">
        <HelloWorld :num="num" :msg="hello" :arrs="arr" :obj="post"/>
      </div>
    </template>
    
    <script>
    import HelloWorld from "./components/HelloWorld.vue";
    
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {
          num: 10,
          hello: "hello world",
          arr: ["aa","bb","cc"],
          post: {
            id: 1,
            name: "hello dj"
          }
        }
      }
    };
    </script>
    

    上面演示了Number,String,Array,object的用法



    作者:回不去的那些时光
    链接:https://www.jianshu.com/p/bdda44c00443
    来源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
  • 相关阅读:
    在LINQTOSQL中实现“级联删除”的方法
    “BindingNavigator”如何在删除前弹出确认框?
    OOP设计思考——究竟是继承自普通类,还是继承自抽象类?
    ASP.NET控件为什么无法使用结构?
    如何消除Web自定义控件的“自生成”复合属性的冗余类名称?
    用C#动态输出js单引号问题
    关于ready和load方法作用于不同情况下的比较
    关于CodeSign error : Certificate identity 'iPhone Distribution *** : ...问题
    [iOS]Xcode4/iOS5调试UncaughtException崩溃First throw call stack不打印方法名的解决方案
    Lion版本Mac OS下查看iPhone Simulator目录
  • 原文地址:https://www.cnblogs.com/ylblogs/p/10749290.html
Copyright © 2011-2022 走看看