原创：Vue自定义组件及自定义组件基本用法

其实自定义组件就是自定义标签。每个标签代表一个组件

 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>chapter 07章节学习测试</title>
　　　　　<!--必须要引入-->
        <script type="text/javascript" src="js/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <h3>
                {{msg}}22
            </h3>
            <hr />
            <my-component></my-component>
            <p>再使用一次自定定义组件</p>
            <my-component></my-component>
        </div>
    </body>

</html>
<script type="text/javascript">
    Vue.component('my-component', {
        template: `<div class="comDiv">
                    <h3>{{msg}}</h3>
                    <h3>{{msg2}}</h3>
                    <p>这是组件的内容</p>
                    <p>这是组件的内容22</p>
                    </div>`,
        //自定义组件中data不同于new Vue()实例
        //以函数形式,并且用return返回
        data:function(){
            return{
                msg:'**子组件的内容',
                msg2:'**子组件内容22'
            }
        }
    })
    var app = new Vue({
        el: '#app',
        data: {
            msg: '组件详解学习',
            mycom:{
                title:'自定义组件名称',
                comtent:'自定义组件内容'
            }
        }
    })
</script>
<style type="text/css">
    .comDiv{
        background: pink;
        width:50%;
    }
</style>

 

posted @ 2020-10-11 14:55  码哥之旅  阅读(535)  评论(0)  编辑  收藏  举报