Vue入门学习（组件化开发）

最新推荐文章于 2024-09-25 11:16:42 发布

专业bug开发

最新推荐文章于 2024-09-25 11:16:42 发布

阅读量276

点赞数

分类专栏：前端学习文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/k1507157/article/details/120123584

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

前言
一、组件是什么？
二、关于Vue组件
总结

前言

今天在复习完前面学习的基础后开始学习Vue的组件化开发，学习笔记整理如下，有错误或者不足欢迎大家指正。

一、组件是什么？

组件是可复用的 Vue 实例，且带有一个名字。下面展示的就是一个简单的Vue组件

Vue.component('todo-item', {
  template: '<h2>你好</h2>'
})

<body>
    <div id="app">
        <!-- 使用简单的组件 -->
        <todo-item></todo-item>     
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('todo-item', {   //这是一个简单的组件
            template: '<h2>你好</h2>'
        })
        var app = new Vue({
            el: "#app",
            data: {
            
            }
        })
    </script>
</body>

二、关于Vue组件

1.如何定义组件名

使用 kebab-case

ue.component('my-component-name', { 
/* ... */   //组件的内容
})

使用 PascalCase

Vue.component('MyComponentName', { 
/* ... */   //组件的内容
})

PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。

2.组件分类

(1). 全局组件

在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

这三个组件在各自内部也都可以相互使用。

<body>
    <!-- 三个全局组件在同一个根实例下使用 -->
    
    <div id="app">
        <component-a></component-a>
        <component-b></component-b>
        <component-c></component-c>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        Vue.component('component-a', {
            template:'<h1>你</h1>'
        })

        Vue.component('component-b', {
            template:'<h2>们</h2>'
        })
        Vue.component('component-c', {
            template:'<h3>好</h3>'
        })
        var app = new Vue({
            el: "#app",
            data: {
            }
        })
    </script>
</body>

在这里插入图片描述

(2). 局部组件

通过一个普通的 JavaScript 对象来定义组件：

<body>
    <div id="app">
        <component-a></component-a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //这里定义了一个简单的局部组件
        
        var ComponentA = {
            template: '<h3>你们好！</h3>'
        }
        var app = new Vue({
            el: "#app",
            components: {
                'component-a': ComponentA,
            }
        })
    </script>
</body>

在这里插入图片描述

3.组件与实例

在Vue中我们有：组件 = 实例

4.组件传值

(1).父组件向子组件传递参数

父组件向子组件传递参数的时候依靠属性传递

<body>
    <div id="app">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <component-a
            v-for="(item, index) of list"
            :key="index"
            :content="item"      //父组件的属性值
            :index="index"
            @delete="handleDelete"
            ></component-a>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //这里定义了一个简单的局部组件
        Vue.component('component-a',{
            props: ['content', 'index'],     //子组件接受父组件传递参数，[]内为传递过来的参数
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function(){
                    this.$emit('delete', this.index)
                }
            }
        })
        var app = new Vue({
            el: "#app",
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleDelete: function(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>

(2).子组件向父组件传递参数

子组件向父组件传递参数的时候通过发布订阅事件完成
子组件发布一个事件，父组件订阅该事件

<body>
    <div id="app">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <component-a
            v-for="(item, index) of list"
            :key="index"

            <!-- 父组件的属性值 -->
            :content="item"     
            :index="index"
            @delete="handleDelete"   
            <!-- 父组件订阅了子组件发布的事件，即可接受子组件的数据 -->
            
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        //这里定义了一个简单的局部组件
        Vue.component('component-a',{
            props: ['content', 'index'],     //子组件接受父组件传递参数，[]内为传递过来的参数
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function(){
                    this.$emit('delete', this.index)   //子组件发布一个事件
                }
            }
        })
        var app = new Vue({
            el: "#app",
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                handleDelete: function(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>