Vue中的校验

最新推荐文章于 2025-05-31 10:00:00 发布

勤奋的宇威

最新推荐文章于 2025-05-31 10:00:00 发布

阅读量642

点赞数

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/weixin_45080852/article/details/103997560

版权

Vue.js 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了在Vue中如何进行组件属性(props)的校验，特别是在子组件使用父组件传递过来的变量时，通过props: ['name', 'age', 'fn']进行校验的方法，以及如何实现父子组件间的有效通信。" 117579716,10547606,Android NDK实践：生成SO库与SDK,"['Android开发', 'JNI', 'NDK库', 'cpp']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中的校验

当子组件使用到父组件的变量时候可以用到校验props: [‘name’, ‘age’, ‘fn’]。

两父子间通信

// son.vue
<template>
    <div>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
        <button @click="showInfo">显示信息</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>

<script>
export default {
    // 要使用父元素内容则需校验。
    props : ["name","age","fn"],
    methods: {
        showInfo(){
            this.$emit("show"); // $emit()主动触发事件
        },
        changeAge(){
            this.fn();
        }
    },
}
</script>

<template>
    <div>
        <son 
        :name="name" 
        :age="age" 
        :fn = "changeAge"
        @show='showInfo'></son>
        <div
            v-if="show"
            :style='{
                margin:"20px 0",
                padding:"50px 0",
                border:"1px solid red"
            }'
        >
            姓名：宇威</br>
            年龄：{{ age }}</br>
            爱好：女</br>
        </div>
    </div>
    
</template>

<script>
import Son from "./Son";
export default {
     components : {
        Son
    },
    data(){
        return {
            name : "宇威",
            age : "18",
            show : false
        }
    },
    methods: {
        showInfo(){
            this.show = !this.show;
        },
        changeAge(){
            this.age = 16;
        }
    },
   
}
</script>