M87星云

导航

VUE父子组件通信 



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <parent></parent>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>

    //子组件
    let chiled = {
        template:`
            <div>
                <p>我是子组件：{{name}}</p>
                <button @click="changeName()">changeName</button>
            </div>
        `,
        props:{
            name:{
                type:String,
                required:true,
                default:'hello'
            }
        },
        methods: {
            changeName(){
                //子传父
                this.$emit("getName","lily")
            }
        }
    };

    // 父组件
    let parent = {
        template:`
            <div>
                <p>我是父组件：</p>
                //接收子传父的参数
                <chiled :name="name" @getName="setName"></chiled>
            </div>
        `,
        components: {
            chiled
        },
        data(){
            return {
                name:"boat",
            }
        },
        methods: {
            setName(val){
                this.name = val;
            }
        }
    };

    new Vue({
        el:"#app",
        components:{
            parent
        },
        data:{
            n: 0
        },
        methods:{
            addnum(){
                this.n++;
            }
        }
    });

</script>
</html>


 




 






		

			posted on 
2022-01-13 19:22 
挽留匆匆的美丽 
阅读(33) 
评论(0) 
 
收藏 
举报