局部组件的使用

来源：互联网发布：淘宝一件代发怎样操作编辑：程序博客网时间：2024/06/05 20:53

body>    <div  id="box">        <Son></Son>        <Father></Father>    </div></body>

/*        刚刚我用的组件跟组件和全局组件      好了，现在我用一下，局部组件      这里得用到 components这个属性*/    //首先我创建两个组件。    var Father= {      data : function(){        return{          msg : '我是老子，我有老子的数据'        }        },        template: `<div>我是老子组件————————————》老子的数据{{msg}}</div>`    }      var Son ={      data : function(){        return{          msg : '我是儿子，我是儿子，我是儿子'        }        },        template: `<div>生怕别人不知道你是儿子一样————————————》儿子的数据{{msg}}</div>`    }      //  这两个组件很简单 现在两个组件创建好了。那么我肯定想用他。比如说让他显示在 <body></body> 里面/*    //一样的，如果 直接在body里面这样用              <body id="box" >                <Son></Son>                <Father></Father>            </body>       // 以上这样是不行的，因为我们还需要一个根实例。至于为啥要根实例，这里我也还没有理解，它规定的是这样的吧。  */     var rootVue= new Vue ({            el : '#box' ,    //  如果要把infor 显示在            data: {              infor : '我是根哈哈哈哈'            },            components: {              Father,              Son            }     })      //所以我们就创建一个根实例、     //如下     //是不是发现和全局组件有什么不同     //局部组件和全局组件的区别在于。局部组件需要注册才能使用，如何注册呢？用components属性    //组件的使用就到这里，都很简单，很基础。现在我们再来说说子父组件

阅读全文

0 0