vue父子组件

        <div id="app">

            <father></father><!--可以访问父组件-->

            <p1></p1>//不能访问子组件,因为子组件没有注册

        </div>

          

        <script src="js/vue.js"></script>

        <script type="text/javascript">

            let param1 = Vue.extend({

                template:`

                    <div>

                        <img src="img/123.jpg" width="300px" height="200px"/>

                    <div>

                `

            });

              

            let param2 = Vue.extend({

                template:`

                    <div>

                        <p>风景好美<p>

                    <div>

                `

            });

            //Vue.component('p1',param1);

            Vue.component('father',{//注册父组件

                components:{ //将子组件装入父组件

                    'p1':param1,

                    'p2':param2

                },

                template:`

                    <div>

                        <p1></p1>

                        <p2></p2>

                    </div>

                `

            });

              

            new Vue({

                el:"#app"

            })

        </script>

 

posted @ 2020-10-22 09:44  黑质白章  阅读(117)  评论(0编辑  收藏  举报