首页手记 vue子组件的使用

vue子组件的使用

标签：

Vue.js

//子组件的加入就是在父组件里操作components字段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/vue.js"></script>
</head><body>
<div id="box1">
<p>QQ:1697141690</p>
<ty></ty>
</div>
<script>
//构造一个子组件
    var mytychild=Vue.extend({
        template:"<div><span>子组件DOM加入完全OJBK</span></div>"
    });
//构造一个父组件
    var myty=Vue.extend({
        template:"<div>这是一个父组件<tychild></tychild></div>",
        components:{ //子组件的加入tychild:mytychild}
    });
    Vue.component("ty",myty);
    var vm=new Vue({el:"#box1"});
</script>
</body>
</html>

执行结果：