Vue之组件

布满荆棘的人生 2022-10-29 10:27 201阅读 0赞

1.  全局声明注册一个组件，
2.  组件也是一个vue实例，在定义时也会接受：data,methods,生命周期函数等，
3.  不同的组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性，
4.  但是组件渲染需要html模板，所以增加了template 属性，值就是HTML模板，
5.  全局组件定义完毕，任何vue实例都可以在HTML中通过组件名称来使用组件，
6.  data是一个函数不在是一个对象了，注意是data()。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Vue-Component</title>
    </head>
    
    <body>
        <div id="app">
            <counter></counter>
            <counter></counter>
            <button-counter></button-counter>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></script>
    
        <script>
            //1、全局声明注册一个组件
            //组件也是一个vue实例，在定义时也会接受：data,methods,生命周期函数等
            //不同的组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性
            //但是组件渲染需要html模板，所以增加了template 属性，值就是HTML模板
            //全局组件定义完毕，任何vue实例都可以在HTML中通过组件名称来使用组件
            //data()是一个函数不在是一个对象了。
            const Feature = Vue.component('counter',
                {
                    template: `<button v-on:click="count ++">我被点击了{
       {count}}次</button>`,
                    data() {
                        return {
                            count: 1
                        }
                    }
                });
    
    
            //2、局部声明组件
            const buttonCounter = {
                template: `<button v-on:click="count ++">我被点击了{
       {count}}次····</button>`,
                data() {
                    return {
                        count: 1
                    }
                }
            };
    
            new Vue({
                el: "#app",
                data: {
                    count: 1
                },
                //注册局部组件，注意是components
                components: {
                    "button-counter": buttonCounter
                }
            }
            )
        </script>
    </body>
    
    </html>

> 每日寄语：积少成多，积水成渊，多敲多总结！