Vue component 父子组件通信 props

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div_box :brand="msg1" :colleges="msg2"></div_box>

        <div id="home">
            <span>首页</span>
            <div_box2 :brand="msg1" :colleges="msg2"></div_box2>
        </div>
        <div id="mine">
            <span>我的</span>
        </div>
    </div>
    <template id="div_box">
        <div>
            <p>{{brand}}</p>
            <ul>
                <li v-for="item in colleges">{{item}}</li>
            </ul>
        </div>
    </template>
    <template id="div_box2">
        <div>
            <p>{{brand}}</p>
            <ul>
                <li v-for="item in colleges">{{item}}</li>
            </ul>
        </div>
    </template>
    <template id="div_box3">
        <div>
            <p>{{brand}}</p>
            <ul>
                <li v-for="item in colleges">{{item}}</li>
            </ul>
        </div>
    </template>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        const Box = {
            //用于接收数据
            props:['brand','colleges'],
            template:'#div_box'
        }
        const Box2 = {
            //用于接收数据
            props: {
                brand:String,
                colleges:Array
            },
            template:'#div_box2'
        }
        const Box3 = {
            //用于接收数据
            props: {
                brand:{type:String,required:true,default:"aaaaaaa"},
                colleges:{type:Array,required:true}
            },
            template:'#div_box3'
        }

        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg1:'你好!',
                    msg2:['web','java','vue']
                }
            },
            components:{
                'div_box':Box,
                'div_box2':Box2,
                'div_box3':Box3
            }
        }).mount('#app');
    </script>
</body>
</html>
复制代码

 

posted @   残星  阅读(97)  评论(0编辑  收藏  举报
编辑推荐:
· [杂谈]如何选择:Session 还是 JWT?
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· JavaScript是按顺序执行的吗?聊聊JavaScript中的变量提升
· [杂谈]后台日志该怎么打印
· Pascal 架构 GPU 在 vllm下的模型推理优化
阅读排行:
· WinForm 通用权限框架,简单实用支持二次开发
· 硬盘空间消失之谜:Linux 服务器存储排查与优化全过程
· 如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面
· 面试官:DNS解析都整不明白,敢说你懂网络?我:嘤嘤嘤!
· Fleck:一个轻量级的C#开源WebSocket服务端库
点击右上角即可分享
微信分享提示