组件(component)：

组件化开发组件可以扩展 HTML 元素，封装可重用的代码，可以被连续调用。
分为
1.全局组件
2.局部组件
注：组件名不可以使用已经存在的html元素组件中的data数据是一个函数，并且要有一个返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
    <script src="js/vue.js"></script>
    <script>
        Vue.component("my-component",{
            template:`
                <ul>
                    <li>首页</li>
                    <li>关于</li>
                    <li>我们</li>
                </ul>
            `
        })
        new Vue({
            el:'#app',
           /* components:{
                "my-component":{
                    template:`
                           <p>你好</p>
                    `
                }
            }*/
        })
    </script>
</body>

</html>

q.png

组件的嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component("my-father",{
        template:`
             <div>
                 <h1>Hello</h1>
                 <my-child ></my-child>
             </div>
        `
    })

    Vue.component("my-child",{
        template:`
             <p>你好</p>
        `
    })
    new Vue({
       el:"#app" ,
    })
</script>
</body>
</html>

把子元素嵌套在父元素中显示出父元素与子元素的值

w.png

组件中data是一个函数，并且要有一个返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <m></m>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component("m",{
        template:`
            <div>
                <h1>{{mess}}</h1>
                <button @click="add">点击</button>
            </div>
        `,
        data:function(){
            return{
                mess:"你好"
            }
        },
        methods:{
            add:function(){
                alert("aa")
            }
        }
    })
    new Vue({
        el:"#app",
    })
</script>
</body>
</html>

R.png

组件的嵌套父给子传(用prop属性)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <my-father></my-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component("my-father",{
        template:`
             <div>
                 <my-tit v-bind:tit='title'></my-tit>
                     <my-fruit v-bind:fruList='list'></my-fruit>
             </div>
        `,
        data:function(){
            return{
                list:['apple','pear','banana'],
                title:'水果列表'
            }
        }
    })

    Vue.component('my-tit',{
        props:['tit'],
        template:`
                 <h2>{{tit}}</h2>
               `
    })


    Vue.component('my-fruit',{
        props:['fruList'],
        template:`
                <ul>
                    <li v-for="value in fruList">{{value}}</li>
                </ul>
             `
    })

    new Vue({
        el:"#app" ,
    })
</script>
</body>
</html>

O.png