千峰商城-springboot项目搭建-36-vue组件通信-子传父

子传父：通过子组件的按钮调用父组件的函数，通过函数传值。

//定义一个header-bar组件
Vue.component("header-bar",{
    data:function(){
        //组件中的data是通过函数返回的对象
        return{
            //title:"java2022电商平台"
            str2:"子组件中的数据"
        };
    },
    template:`<div class="divStyle">
                <table class="tableStyle">
                    <tr>
                        <td width="200px" align="right" valign="middle">
                            <img src="img/logo.png" class="logoImg" />
                        </td>
                        <td>
                            <label class="titleStyle">
                            {{title}}
                            </label>
                        </td>
                        <td>
                            <button @click="childMethod">子组件中的按钮</button>
                        </td>
                    </tr>
                </table>
            </div>`,
            props:["title"],
            methods:{
　　　　　　　　　　//触发子组件中的自定义事件
                childMethod:function(){
                    //执行父组件中的方法
                    this.$emit("my-event",this.str2);
                }
            }
            });

 

  
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/my-components.css" />
    </head>
    <body>
        <div id="container">
            <!--使用header-bar组件-->
            <!--组件的引用必须在vue实例指定的容器中-->
            <header-bar :title="str" @my-event="parentMethod"></header-bar>    
            从子组件传递的数据：{{str3}}
        </div>
        
        <script type="text/javascript" src="js/vue.js" ></script>
        <script type="text/javascript" src="js/my-components.js"></script>
        <script type="text/javascript">    
            //vue实例本身就是一个组件。(模板就是el指定的容器div，data就是组件数据,methods就是组件的事件函数)
            //在vue实例指定的el容器中引用的组件<header-bar>称为子组件，当前Vue实例就是父组件
            var vm = new Vue({
                el:"#container",
                data:{
                    str:"java2022千峰武汉电商平台",
                    str3:""
                },
                methods:{
                    parentMethod:function(p){
                        vm.str3 = p;
                    }
                }
            });
        </script>
        
    </body>
</html>

 

 

 

 

 

 

posted @ 2022-07-11 15:31  临易  阅读(27)  评论(0)  编辑  收藏  举报