Vue之组件

最新推荐文章于 2022-07-11 10:03:25 发布

All is well!8023

最新推荐文章于 2022-07-11 10:03:25 发布

阅读量110

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_36073688/article/details/113797378

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

All is well!8023

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue之组件

<!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>V.
复制链接

扫一扫