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

 父传子：父组件在调用子组件的时候向子组件传递数据。
 
vue实例本身就是一个组件。(模板就是el指定的容器div，data就是组件数据,methods就是组件的事件函数)
在vue实例指定的el容器中引用的组件<header-bar>称为子组件，当前Vue实例就是父组件。
<!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></header-bar>                            
        </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:{
                    
                },
                methods:{
                    
                }
            });
        </script>
        
    </body>
</html>

 

 父传子传值：（通过组件的属性实现父组件传递数据到子组件）
组件定义：
//定义一个header-bar组件
Vue.component("header-bar",{
    data:function(){
        //组件中的data是通过函数返回的对象
        return{
            //title:"java2022电商平台"
        };
    },
    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="test">组件中的按钮</button>
                        </td>
                    </tr>
                </table>
            </div>`,
            props:["title"],
            methods:{
                test:function(){
                    alert("组件中定义的函数");
                }
            }
            });

 

引用子组件：

<!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"></header-bar>                            
        </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千峰武汉电商平台"
                },
                methods:{
                    
                }
            });
        </script>
        
    </body>
</html>

 

 

 

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