VUE

Vue组件化开发（笔记一）

2020-09-30  本文已影响0人  似朝朝我心

组件化开发步骤：
1.创建组件构造器 Vue.extend({})
2.注册组件 Vue.component()
3.使用组件

创建组件的构造器对象，Vue对象提供了Vue.extend( )方法,可以用来创建构造器,括号里面放置一个参数，这个参数是个对象类型，和我们创建vue的实例一样，new Vue({ })。

全局组件时是Vue.component()，局部组件时是components: { }

上面的这种组件是全局注册，意味着可以在多个Vue实例下使用。

组件的局部注册（开发里面用得最多的），在Vue实例里面注册就叫局部注册（而全局组件是在Vue实例之外注册的，看上面的截图可以看到）。

父组件和子组件的关系（理清谁在谁里面注册，谁在谁里面使用组件，也就是我们常常碰到的作用域问题）

组件注册的语法糖，因为Vue2.0版本后，已经很少使用Vue.extend({})创建构造器的写法了。

全局组件语法糖写法：


注册局部组件的语法糖：


这种语法糖注册组件，整个代码页面看起来非常眼花缭乱，让人维护傻傻分不清，所以我们Vue提供了组件模板抽离的写法（当我们学习了Vue提供的脚手架的模板抽离方法之后，脚手架那个会更好。）

第一种模板抽离方法：script标签，type类型必须是text/x-template



不过上面这种模板抽离很少用（不推荐）。

第二种模板分离写法：template标签形式


组件的template模板可以访问Vue实例数据吗？不能。


vue实例里面定义的数据，只能在绑定对应的挂载点上使用，而组件模板是不能使用vue实例定义的数据的，专业术语：组件不能访问vue实例。

组件是一个单独功能模块的封装，他有属于自己的template模板，还有component，自然也应该有自己存放的属性data，只不过这个data不再是一个属性对象的形式，而应该是函数，并且还有一个return返回对象。



如果是对象形式的data
,会报这个错误

报错信息提示我们，data应该是一个函数，并且return回一个值。

下面来看下组件模板访问自己的data



通过上述的例子，其实组件的原型是指向vue的，我们发现组件内部其实也是一个vue实例，组件里面既然可以有template,data,component,相对的像vue实例里面的methods,computed在组件里面也是可以使用的。

我们会想到，组件中的data为什么必须是一个函数？

函数形式的data保证了组件实例的相互独立性。
我们这里调用3此同一个组件实例来验证以下，点击每个按钮，他们都是相互独立的，互不影响。

<div id="app">
        <mycom2></mycom2>
        <mycom2></mycom2>
        <mycom2></mycom2>
    </div>
    <!--使用template标签来模板分离-->
    <template id="temp">
        <div>
            <h2>计数器</h2>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
            <h2>{{count}}</h2>
        </div>
    </template>

    <script>
        Vue.component('mycom2', {
            template: `#temp`,
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                increment () {
                    this.count++
                },
                decrement () {
                    this.count--
                }
            },
        })
        const app = new Vue({
            el: '#app',

        })
    </script>

我们可以看见效果，每个小组键都是互相独立使用data函数定义的count，每次返回的都是一个新的对象，这就是组件复用，组件之间在哪里调用或者调用几次都不会相互影响，更不会产生连锁反应。

父子组件通信传递的问题

首先我们得明确，通过上面的例子发现，我们的子组件并不能引用和访问父组件或者Vue实例定义的数据。
但实际上，我们有这样一种需求，数据确实需要从上层传递到下层，我们从服务器请求了很多很多的数据回来，其中有一部分的数据，并非我们在整个页面的的大组件进行展示的，而是单纯想要给下面的子组件来进行展示。
这个时候呢，父组件并不会再让子组件发送一个网络请求，而是将父组件（大组件）中请求到的数据直接传递给小组件（子组件）。

父子组件间是如何进行传值（数据通信的呢）？
1.父组件通过props向子组件传递数据(这里的props是properties的缩写，属性的意思)
2.子组件通过自定义事件向父组件发送消息(emit，发射的意思)

下面是代码图展示。
父传子代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--这里是Vue实例的模板-->
    <div id="app">
        <mycom :Msg="msg" :Books="books"></mycom>
    </div>

  <!--这里是组件mycom的模板-->
    <template id="mycom">
        <div>
            <h2>{{Msg}}</h2>
            <p>{{Books}}</p>
            <ul>
                <li v-for="item in Books">{{item}}</li>
            </ul>
        </div>
    </template>

    <script>
        //子组件
        const mycom = {
            template: '#mycom',
            props: ['Msg', 'Books'],//传递的是变量，而不是字符串
            data() {
                return {

                }
            },
        }
        //将Vue实例作为父组件
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    msg: 'hello',
                    books: ['措不及防的爱', '三生三世十里桃花', '芈月传', '那些年']
                }
            },
            components: {
                mycom,
            }
        })
    </script>

</body>
</html>

关于父传子props的写法，有很多种常见类型。

第一种是props:[ ]数组类型
第二种是对象类型{}



父传子props有2个bug，驼峰命名标识，要用短横杠代替（脚手架不会限制，只有HTML代码会这样，所以HTML代码里面不要写驼峰，不然很致命，建议所有命名都小写），定义子组件模板的时候，必须有一个根节点，必须被根节点包裹，default默认值的好处是，页面报错的时候，会把默认值渲染到页面上。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <!-- <mycom :myInfo="info" :myMessage="message"></mycom>  （会报错） -->
        <mycom :my-info="info" :my-message="message"></mycom>
    </div>

    <template id="mycom">
        <div>
            <h2>{{myInfo}}</h2>
            <p>{{myMessage}}</p>
        </div>
    </template>

    <script>
        //子组件
        const mycom = {
            template: '#mycom',
            props:{
                myInfo: {
                    type: Object,
                    default () {
                        return {}
                    }
                },
                myMessage: {
                    type: String,
                    default: ''
                }
            },
            data() {
                return {

                }
            },
        }
        //将Vue实例作为父组件
        const app = new Vue({
            el: '#app',
            data() {
                return {
                    info: {
                        name: 'qinfubin',
                        age: 21,
                        height: 1.78
                    },
                    message: 'hello'
                }
            },
            components: {
                mycom,
            }
        })
    </script>
</body>
</html>

驼峰标识用短横杠代替


如果组件模板中没有根节点，缺失了我红色框选的一对div标签的话，会报如下错误，因为div作为根节点包裹他下面的所有标签。



子级向父级传递（当子组件需要向父组件传递数据时一般用自定义事件来完成，用v-on指令监听dom事件）


自定义事件的流程：
在子组件中，通过过$emit()来向外发射触发事件，告诉父组件用户把我干嘛了（我被被点击了）。
在父组件中，父组件通过v-on来监听子组件触发事件，这时候的父组件已经收到了消息是儿子发过来的消息（并且做出相应的回应）


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- Vue实例模板（父组件） -->
    <div id="app">
        <!-- 调用已经注册的子组件 -->
        <mycom @itemclick="myClick"></mycom>
    </div>
    
    <!-- 子组件模板 -->
    <template id="mycom">
        <div>
            <button v-for="item in categories" @click="btnClick(item)">
                {{item.name}}
            </button>
        </div>
    </template>

    <script>
        //子组件
        const mycom = {
            template: '#mycom',      
            data() {
                return {
                    categories:[
                        {id:'1',name:'热门推荐'},
                        {id:'2',name:'数码手机'},
                        {id:'3',name:'家用家电'},
                        {id:'4',name:'电脑办公'},
                    ]
                }
            },
            methods: {
                btnClick (item) {
                    //console.log(item)
                    //发射事件
                    this.$emit('itemclick', item)
                }
            }
        }
        
        //将Vue实例作为父组件
        const app = new Vue({
            el: '#app',
            components: {
                mycom,//组件注册，语法糖+对象的增强写法
            },
            methods: {
                myClick (item) {
                    console.log('myClick', item)
                }
            }
        })
    </script>
</body>
</html>

逻辑图：


上一篇下一篇

猜你喜欢

热点阅读