vue的父子组件间的相互传参props及props数据的多种验证机制

Z时代
2024-01-10
分类：综合

vue

感觉自己即将完全步入前端大军，后台老板都不需要我弄了，塞翁失马。。。时间会告诉我们是好是坏

好了言归正传，最近vue是搞的不亦乐乎啊，下面来总结一下vue组件间的各种使用方法以及一些技巧

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

1.父组件如何向子组件传参数

<div id="app">
    <!-- 传递静态值 --这里firstBlood为什么要写成first-blood上一篇已经说明 -->
    <son-demo first-blood="参数值"></son-demo>
    <!-- 传递动态值  -->
    <son-demo :first-blood="giveSon"></son-demo>
    <!-- 如果要直接传递Boolean值 --这里的true会被直接解析成true而不是字符串 -->
    <son-demo :first-blood="true"></son-demo>
</div>
<script type="text/x-template" id="sonModel">
    <h1>{{firstBlood}}</h1>
</script>
<script>
    //定义子组件
    var sonDemo = {
        template: "#sonModel",
        props:['firstBlood'],
        data(){
            return {};
        },
    }
    //父组件
    new Vue({
        el: '#app',
        components: {
            sonDemo    //也可以这样写  sonDemo: sonDemo
        },
        data: {
            giveSon:'给儿子的值'
        }
    });
</script>
注意：vue不推荐直接在子组件中修改父组件传来的props的值，会报错

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "" (found in component )

如果要修改,在子组件里定义一个新变量来接收↓

data(){

return {
     getFirstBlood: this.firstBlood    //通过data, 定义新变量getFirstBlood, 这样getFirstBlood的值变更时，不会影响父组件传来的firstBlood的值
}

}

还有如果传递的参数是数组类型的话，子组件是可以直接对其进行操作的，同时父组件里的数组也会跟着变，如果不想污染初始值最好还是新定义一个变量接收

2.父组件向子组件传值时对传递的参数进行类型验证，如果没传给个默认值

type 可以是下列原生构造函数中的一个：String、Number、Boolean、Array、Object、Date、Function、Symbol

<div id="app">
    <!-- 传递动态值  -->
    <son-demo :show-or-del="isshow" :first-blood="giveSon"></son-demo>
</div>
<script type="text/x-template" id="sonModel">
    <h2 v-if="showOrDel"></h2>
    <h1>{{firstBlood}}</h1>
</script>
<script>
    //定义子组件
    var sonDemo = {
        template: "#sonModel",
        props: {
            showOrDel: {
                type: [Boolean, Number],
                required: true
            },
            firstBlood: {
                type: String,
                required: '默认值'
            }
        },
        data(){
            return {};
        },
    }
    //父组件
    new Vue({
        el: '#app',
        components: {
            sonDemo    //也可以这样写  sonDemo: sonDemo
        },
        data: {
            isshow: false,
            giveSon:'给儿子的值'
        }
    });
</script>

3.子组件如何向父组件传递参数关键词$emit

<div id="app">
    <son-demo @giveFatherInfo="getSonInfo"></son-demo>
</div>
<script type="text/x-template" id="sonModel">
    <button @click="giveDad">点击给父亲传值</button>
</script>
<script>
    //定义子组件
    var sonDemo = {
        template: "#sonModel",
        data(){
            return {
                idValue:'123445'
            };
        },
        methods: {
            giveDad(){
                this.$emit('giveFatherInfo', this.idValue);
            }
        }
    }
    //父组件
    new Vue({
        el: '#app',
        components: {
            sonDemo    //也可以这样写  sonDemo: sonDemo
        },
        data: {
            userid: ''
        },
        methods: {
            getSonInfo(v) {
                 this.userid = v;
            },
        },
    });
</script>