Vue 父子组件传值

父组件传给子组件 props
子组件传给父组件 this.$emit()

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义事件(子传父)</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <!-- //父组件 -->
    <div id="app">
        <h2>{{child}}</h2>
        <big-box @portal="getPortal" :father="message"></big-box>
    </div>

    <script>
        //定义子组件
        let bigBox = {
            data(){
                return{
                    childName:'儿子',
                    name:''
                }
            },
            props:['father'],
            template:'<div><input type="button" value="点击传给爸爸" @click="child"><input type="button" value="获取爸爸的值" @click="getFather"><h2>{{name}}</h2></div>',
            methods:{
                child:function(){
                    this.$emit('portal', this.childName);
                },

                getFather:function(){
                    this.name = this.father;
                }
            }
        }


        // 父组件
        let app = new Vue({
            el:'#app',
            data:{
                child:'',
                message:'爸爸'
            },
            components:{
                bigBox
            },
            methods:{
                getPortal:function(val){
                    this.child = val;     
                }
            }
        })


    </script>
</body>
</html>```
posted @ 2021-01-28 00:08  HF10  阅读(72)  评论(0)    收藏  举报