前端基础学习——Vue组件介绍

曾经终败给现在 2023-09-28 14:38 130阅读 0赞

**目录**

一. Vue组件

1.1.全局组件

1.2.局部组件

1.3.组件模板

二. 父子组件

三. 组件之间的通信

3.1.子组件获取父组件数据

3.2.父组件获取子组件数据

四. 前端学习专栏

--------------------

## **一. Vue组件** ##

> 在vue中，组件是最重要的组合部分，官方中定义组件为可复用的vue实例，分为全局组件和局部组件，接下来通过实例来分别演示两种不同的组件。

### 1.1.全局组件 ###

> 全局组件可以在任意Vue实例下使用。

> 通过上面的例子，我们可以总结出全局组件的使用步骤：
> 
>  *  使用vue.component()注册组件，需要提供2个参数：组件的标签名和组件构造器。
>  *  vue.component()内部会调用组件构造器，创建一个组件实例
>  *  将组建挂载到某个vue实例下。

> **注意：**一个组件的template部分，必须要包裹在一个根容器中。

> 因为组件是可复用的vue实例，所以它们也能有data、computed、watch、methods以及生命周期钩子等。

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('mycomponent', {
            template: `<div>
                            <h3>我是全局组件</h3>
                            {
       {num}} <button @click="add">加</button>
                       </div>`,
            data(){
                return {
                    num:1
                }
            },
            methods:{
                add(){
                    this.num++;
                }
            }
        });
        var vm = new Vue({
            el: '#app',
        });
    </script>

> 上面代码中有两个注意事项：
> 
>  *  组件模板的内容，可以写在一对反引号中（\`\`），这样就可以不使用字符串拼接的形式了。
>  *  一个组件的data选项必须是一个函数，该函数返回一个对象。

### 1.2.局部组件 ###

> 如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。 因此我们可以将上面的全局组件改为局部组件。

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {
            template: `<div>
                           <h3>我是局部组件</h3>
                           {
       {num}} <button @click="add">加</button>
                       </div>`,
            data(){
                return {
                    num:1
                }
            },
            methods:{
                add(){
                    this.num++;
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            components:{    //声明局部组件
                mycomponent:obj
            }
        });
    </script>

### 1.3.组件模板 ###

> 如果组件中的template内容过多，那么可以使用组件模板来声明template中的内容。

<div id="app">
        <mycomponent></mycomponent>
    </div>
    
    <template id="mytemplate">
        <div>
            <h3>我是局部组件</h3>
            {
       {num}} <button @click="add">加</button>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {
            template: '#mytemplate',      //使用选择器应用组件模板
            data() {
                return {
                    num: 1
                }
            },
            methods: {
                add() {
                    this.num++;
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            components: { //声明局部组件
                mycomponent: obj //组件名:组件实例
            }
        });
    </script>

--------------------

## 二. 父子组件 ##

> 当我们继续在组件中写组件，形成组件嵌套的时候，就是我们所说的父子组件了。

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <h3>我是父组件</h3>
            
            <subcomponents></subcomponents>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {
            template: '#mytemplate',
            data() {
                return {}
            },
            components:{          //声明子组件
                subcomponents:{
                    template:`<div>我是子组件</div>`
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            components: { //声明局部组件
                mycomponent: obj //组件名:组件实例
            }
        });
    </script>

--------------------

## 三. 组件之间的通信 ##

> 组件与组件之间是可以互相通信的。包括父子组件之间、兄弟组件之间等等，都可以互相通信。 下面只讨论父子组件之间通信问题。

### 3.1.子组件获取父组件数据 ###

> 在vue中，组件实例的作用域是孤立的，默认情况下，父子组件的数据是不能共享的，也就是说，子组件是不能直接访问父组件的数据的。为此，vue给我们提供了一个数据传递的选项prop，用来将父组件的数据传递给子组件。具体使用如下：

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <h3>我是父组件</h3>
            <subcomponents msg="hello world!"></subcomponents>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {
            template: '#mytemplate',
            data() {
                return {}
            },
            components:{
                subcomponents:{
                    template:`<div>我是子组件，我能获取父组件传递的数据：{
       {msg}}</div>`,
                    props:['msg']
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            components: { //声明局部组件
                mycomponent: obj //组件名:组件实例
            }
        });
    </script>

> 上面实例中，子组件获取父组件传递的数据的步骤为：
> 
>  *  在子组件标签中，声明 msg 属性，属性值即为父组件向子组件传递的值。
>  *  在子组件中，使用props选项，声明接收父组件向子组件传递值的载体，即 ‘msg’ 。
>  *  子组件中就可以使用 msg 获取父组件向子组件传递的值了。

> 也可以使用 v-bind 绑定子组件标签属性，这样就可以将父组件data数据传递个子组件了。

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <h3>我是父组件</h3>
            <subcomponents :msg="welcome"></subcomponents>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {
            template: '#mytemplate',
            data() {
                return {
                    welcome:'hello world!'
                }
            },
            components:{
                subcomponents:{
                    template:`<div>我是子组件，我能获取父组件传递的数据：{
       {msg}}</div>`,
                    props:['msg']
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            components: { //声明局部组件
                mycomponent: obj //组件名:组件实例
            }
        });
    </script>

### 3.2.父组件获取子组件数据 ###

> 和上面不一样的是，父组件想要获取子组件的数据时，需要子组件通过emit主动将自己的数据发送给父组件。

<div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <div>
            <h3>我是父组件，接收子组件传递过来的数据：{
       {msg}}</h3>
            <subcomponents @childmsg="get" msg="hello world!"></subcomponents>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let obj = {
            template: '#mytemplate',
            data() {
                return {
                    msg:''
                }
            },
            methods:{
                get(msg) {
                    this.msg = msg;
                }
            },
            components: {
                subcomponents: {
                    template: `<div>
                                 我是子组件，我能获取父组件传递的数据：{
       {msg}}
                                 <input type="button" value="给父组件发数据" @click="send">
                               </div>`,
                    props: ['msg'],
                    data() {
                        return {
                            message: '我是子组件的数据'
                        }
                    },
                    methods: {
                        send() {
                            this.$emit('childmsg', this.message);
                        }
                    }
                }
            }
        };
        var vm = new Vue({
            el: '#app',
            components: { //声明局部组件
                mycomponent: obj //组件名:组件实例
            }
        });
    </script>

>  *  首先，我们需要在子组件中触发一个主动发送数据的事件，上面的例子中是一个点击事件**send**；
>  *  其次，在点击事件中使用**emit**方法，这个**emit**接收两个参数：传递数据的事件和需要传递的数据，这个传递数据的事件也是自定义的；
>  *  然后在父组件中引用子组件，并在引用的子组件中使用**on**监听上一步传递数据的事件，上面的例子中是**childmsg**；
>  *  最后在父组件中使用这个事件，这个事件带有一个参数，就是从子组件发送过来的数据。

--------------------

## **四. 前端学习专栏**  ##

### [https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482![icon-default.png?t=M666][icon-default.png_t_M666]https://blog.csdn.net/weixin\_53919192/category\_11897910.html?spm=1001.2014.3001.5482][https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M666_icon-default.png_t_M666_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482] ###

[icon-default.png_t_M666]: https://csdnimg.cn/release/blog_editor_html/release2.1.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M666
[https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482_icon-default.png_t_M666_icon-default.png_t_M666_https_blog.csdn.net_weixin_53919192_category_11897910.html_spm_1001.2014.3001.5482]: https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482