Vue组件

最新推荐文章于 2023-07-24 18:00:00 发布

仙鹤__

最新推荐文章于 2023-07-24 18:00:00 发布

阅读量61

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52629158/article/details/130794931

版权

文章介绍了Vue.js中的组件系统，强调组件是Vue的核心特性，用于封装可重用的代码。详细讲解了组件的声明、注册和使用，包括全局和局部注册组件的方式，并提供了代码示例。此外，还提到了父子组件的关系及其使用。

摘要由CSDN通过智能技术生成

1.1.1 什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一,vue核心中的核心！
组件可以扩展 HTML 元素，封装可重用的代码

组件类型通用组件(例如表单、弹窗、布局类等)业务组件(抽奖、机器分类)页面组件(单页面开发程序的每个页面的都是一个组件、只完成功能、不复用)

组件开发的三步曲：声明、注册、使用

组件化开发创建组件的两种方式

局部申明组件var Header = { template:'模板', data是一个函数, methods:功能, components:子组件们}

全局注册声明组件（等于注册加声明了）Vue.component('组件名',组件对象)

1.1.2 组件注册

全局注册：

Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象
全局组件注册后，任何vue实例都可以用

代码演示：

html：

 <div id="app">
        <!-- 组件可以重复使用多次  -->
        <myheader></myheader>
        
    </div>
    <template id="myheader">
        <div>
            <h1>{{title}}</h1>
        </div>
       
    </template>

<script src="./js/vue.js"></script>
    <script>
        //创建全局组件(等于注册加声明了)
        Vue.component('myheader',{
            template:`#myheader`,
            data(){
                return{
                    title:'我是myheader组件中data数据中心中的属性title'
                }
            }
        })
        //根组件
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            }
        })
    </script>

另一种写法：

 <div id="app">
        <!-- 组件可以重复使用多次  -->
        <myheader></myheader>
 </div>
 <template></template>

  <script src="./js/vue.js"></script>
    <script>
        //创建全局组件(等于注册加声明了)
        Vue.component('myheader',{
            template:`  
            <div>
            <h1>{{title}}</h1>
            </div>`,
            data(){
                return{
                    title:'我是myheader组件中data数据中心中的属性title'
                }
            }
        })
        //根组件
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            }
        })
    </script>

预览：

组件注意事项：

组件参数的data值必须是函数同时这个函数要求返回一个对象
组件模板必须是单个根元素
组件模板的内容可以是模板字符串

组件可以重复使用多次

在视图层中，使用组件，推荐使用短横线的方式使用组件

代码演示：

html：

<div id="app">
        <!-- 组件可以重复使用多次  -->
        <myheader></myheader>
        <myheader></myheader>
        <myheader></myheader>
    </div>
    <template>
        <div>
            <h1>{{title}}</h1>
        </div>
       
    </template>

<script src="./js/vue.js"></script>
    <script>
        //创建全局组件(等于注册加声明了)
        Vue.component('myheader',{
            template:`  <div>
            <h1>{{title}}</h1>
        </div>`,
            data(){
                return{
                    title:'我是myheader组件中data数据中心中的属性title'
                }
            }
        })
        //根组件
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            }
        })
    </script>

预览：

全局组件的模板可以写在 div#app的外层，如下所示：

<div id="app">
        <!-- 组件可以重复使用多次  -->
        <myheader></myheader>
    </div>
    <template id="myheader">
     <div>
            <h1>{{title}}</h1>
        </div>
    </template>

 //创建全局组件(等于注册加声明了)
        Vue.component('myheader',{
            template:`#header`,
            data(){
                return{
                    title:'我是myheader组件中data数据中心中的属性title'
                }
            }
        })

局部注册：

只能在当前注册它的vue实例中使用

代码演示：

html：

<div id="app">
        <myheader></myheader>
    </div>

<script src="./js/vue.js"></script>
    <script>
        //创建局部组件
   
        var myheader={
            template:`  <div>
            <h1>{{title}}</h1>
        </div>  `,
            data(){
                return{
                    title:'我是myheader组件中data数据中心中的属性title'
                }
            }
        }
        //根组件
        var vm=new Vue({
            //模板选择器
            el:'#app',
            //数据中心
            data(){

                return{
                   
                }

            },
            methods:{
               

            },
            //注册组件
            components: {
                myheader
            }
        })
    </script>

两对父子组件的各自使用：

parent和 child 组件是父子组件关系

根组件和parent 组件是父子组件关系

 <div id="app">
        <parent></parent>
    </div>

<script src="js/vue.js"></script>
    <script>
        // 组件里 都有 属于自己的 模板（视图层）、数据中心、方法中心、计算属性、侦听器、生命周期
        // 全局组件 （申明-使用）
        // 局部组件  （申明-注册-使用）
        let child = {
            template:`
            <div>
                我是child组件
            </div>
            `,
        }

        let parent = {
            template:`
            <div>
                我是parent组件
                <br/>
                <child></child>
            </div>
            `,
            components:{
                child
            }
        }

        // 根组件
        let vm = new Vue({
            el:'#app',
            data:{
   
            },
            methods:{
               
            },
            // 子组件们
            // 注册
            components:{
                parent
            }
        })
    </script>

预览：