Vue component 子传父通信 $emit

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app" style="background-color:blue;height: 400px;height: 400px;padding: 20px;">
        <div_box @div_box_click="div_box_func2"></div_box>
    </div>
    <template id="div_box">
        <div style="background-color: red;height: 200px;height: 200px;">
            <button @click="btnClick">btn</button>
        </div>
    </template>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        const Box = {
            //用于接收数据
            // props:['brand','colleges'],
            template:'#div_box',
            methods:{
                btnClick(){
                    console.log("btnClick");
                    // this.$emit('div_box_click','test_msg1','test_msg2','test_msg3');
                    const args = {
                        name:'subject',
                        intro:'java,vue'
                    }
                    this.$emit('div_box_click',args);
                }
            }
        }
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！'
                }
            },
components:{
                'div_box':Box//,
                // 'div_box2':Box2,
                // 'div_box3':Box3
            },
            methods: {
                div_box_func(arg1,arg2,arg3){
                    console.log("div_box_func"+"----------"+arg1+"----------"+arg2+"----------"+arg3);
                },
                div_box_func2(args){
                    console.log(args);
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

以上是 Vue component 子传父通信 $emit 的全部内容， 来源链接： utcz.com/z/378514.html

回到顶部