zoukankan      html  css  js  c++  java
  • vuebase-1.Props的验证

    1.安装vue init  webpack  vuebase

    2.按照描述填写信息;或者yes;no

    3.进入项目目录:cd vuebase

    3.安装npm : npm  i

    4.启动项目:npm start

    -----------------------------------------------------------------------------------------------------------------

    动态或者静态的props

    props的type的校验

    props中的类型是数组或者对象,必须返回一个function

    结构:

    父组件:

    <template>
    <div class="parent">
    父组件:
    <p>{{sendParentinfo}}</p>
    小明明称呼:
    <Child title="父组件的数据" nick="小宝贝" friend="" parentss="小宝贝爸爸" :age="age" @sendParentinfo="sendParentinfos" />
    </div>
    </template>

    <script>
    import Child from './child'
    export default {
    name: "parent",
    components: {
    Child
    },
    data() {
    return {
    sendParentinfo:"",
    age:1000
    }
    },
    methods: {
    sendParentinfos(data) {
    this.sendParentinfo=data
    }
    }
    }
    </script>
    <style lang="css" scoped>
    </style>

    -----------------------------------------------------------------------------------------------------------

    子组件:

    <template>
    <div class="child">
    子组件:
    <ul>
    <li v-for="item in friends">{{item}}</li>
    </ul>
    {{title}}--{{age}}---{{nick}}---{{parentss}}<button @click="sendParent" type="button">改变子组件向父组件传递数据的按钮</button>
    </div>
    </template>

    <script>
    export default{
    name:"child",
    //props:["title","age"],
    props:{
    title:String,
    age:Number,
    nick:{
    type:String,
    default:"大宝贝"
    },
    parentss:{
    type:String,
    required:true
    },
    friends:{
    type:Array,
    default:function(){
    return ["大宝贝闺蜜","大宝贝闺蜜1","大宝贝闺蜜2","大宝贝闺蜜3"]
    }
    }
    },
    data(){
    return{

    }
    },
    methods:{
    sendParent(){
    this.$emit("sendParentinfo","这个是子组件的数据");
    }
    }
    }
    </script>

    <style lang="css" scoped>
    </style>

  • 相关阅读:
    SAP中的文档维护
    SAP日期处理函数汇总(转)
    PR PO通过fm创建时,如何传输增强字段
    html+jQuery简单的利息计算器
    上传项目到github
    Nodejs-毕业设计5-小技巧
    Nodejs-毕业设计4-登录页面
    Nodejs-毕业设计3-路径
    Nodejs-毕业设计2-下载依赖准备工作
    Nodejs-毕业设计1-部署环境
  • 原文地址:https://www.cnblogs.com/xiao-peng-ji/p/11317822.html
Copyright © 2011-2022 走看看