vue中的父传子 parent-child

最新推荐文章于 2024-05-30 15:26:53 发布

xieting153

最新推荐文章于 2024-05-30 15:26:53 发布

阅读量428

点赞数

分类专栏： vue 文章标签：父子传递组件间的联系

本文链接：https://blog.csdn.net/xieting153/article/details/82751225

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

代码如下：

父传子 通过属性传递的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id='app'>
<son :money="800"></son>
</div>
</body>
</html>
<template id="son">
<div>
    {{money}}
   <button>按钮</button>
</div>
</template>
<script src="node/node_modules/vue/dist/vue.js"></script>
<script>
    let son={
        template:'#son',
        props:{
            money:{
                // type:[Number,String,Array],//传过来的数据类型
                type:Array,
                // type:Number,
                default:function () {
                    return[200,300]
                },
                // default:[200,300],//若不传，会给一个默认值 若没有这个default设置，则拿到的值是个undefined
                //若默认值是个数组或者对象 则需要用函数包起来，把数组或对象作为返回值return出去
                required:true,//这个属性是必须传
                validator(val){//判断条件，判断是否满足需求的
                    console.log(val);//val 就是通过父组件传出来的数据
                    //这个函数是让开发者验证 使用组件的人传进来是数据是否符合这个组件的要求
                    return val<900
                }
            }
        }
    };
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{
            son
        }
    })
</script>

xieting153

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的父传子 parent-child

代码如下：父传子通过属性传递的&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;
复制链接

扫一扫

专栏目录