Vue中的校验

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>
发布了11 篇原创文章 · 获赞 3 · 访问量 324
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览