提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue3组件Props

Vue3组件 Props
2023-06-13 09:13:00 时间

Props的用法比较灵活，其中简单的用法就是父子组件间的通信

tips：

  • Props涉及Vue父子组件通信，父组件提供数据通过属性props传给子组件
  • 在createApp中，component里的数据与data()中的数据一般是不能互通的

example：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="michael">
        <input type="button" @click="go" value="set" />
        <br/>
        <michael-aaa  v-for="msg in data" :key="msg.id" :title="msg.name"></michael-aaa>
    </div>
    <script>
        Vue.createApp({
            data(){
                return {
                    "msg":"hello",
                    "sky":false,
                    "data":[
                        {"id":0,"name":"今天天气不错"},
                        {"id":1,"name":"今天路上畅通"},
                        {"id":2,"name":"今天心情不错"}
                    ]
                }
            },
            "methods":{
                go(){
                    this.msg="Try my best to do everything."
                }
            }
        }).component("michael-aaa",{
            "props":["abc","title"],
            data(){
                return {
                    "kkk":123
                }
            },
            "template":`
                <div>{{title}}</div>
            `
        }).mount("#michael")
    </script>
</body>
</html>

相关文章