vue-组件父传子

最新推荐文章于 2022-09-07 23:51:15 发布

@Tiramisu

最新推荐文章于 2022-09-07 23:51:15 发布

阅读量94

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46606159/article/details/105018725

版权

笔记专栏收录该内容

40 篇文章 0 订阅

订阅专栏

i. 父子组件传值 (props down, events up)
假设第二层组件想和第一层组件进行通信，分析其传值过程
(第一层向第二层传值)：父组件通过props传值到子组件，如此便实现父子组件向下通信
ii. 属性验证 props:{name:Number}
Number,String,Boolean,Array,Object,Function,null(不限制类型)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Examples</title>
    <style>
        .navbar {
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <!--myname为自定义属性，属性值会被当成字符串对待，需要动态绑定-->
        <navbar myname="home" :myshow="false"></navbar>
        <navbar myname="list" :myshow="true"></navbar>
        <navbar myname="parentname" :myshow="true"></navbar>
        <!--动态绑定传值-->
        <navbar :myname="parentname" :myshow="true"></navbar>
    </div>

    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
    //全局组件
        Vue.component("navbar", {
            template: `<div>
          <button>返回</button>  
          navbar -- {{myname}}
          <button v-show="myshow">首页</button>  
        </div>`,
            // props:["myname","myshow"] // 接受父组件传来的属性
            props: {
                myname: String,  //属性验证
                myshow: Boolean
            }
        })

        new Vue({
            el: "#box",
            data: {
                parentname: "父组件的状态"
            }
        })
    </script>
</body>
</html>