Vue（二）

最新推荐文章于 2022-07-09 10:48:40 发布

原创最新推荐文章于 2022-07-09 10:48:40 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文深入探讨了Vue.js中组件化的概念，包括全局组件与局部组件的区别，计算属性的使用，父子组件间的数据传递，以及如何通过自定义事件实现组件间的通信。同时，通过实例演示了如何利用Vue.js构建可复用的UI组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件化的概念

组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性。

先创建一个Vue模板实例

component(全局组件)

    <div id="app">
        <my-com></my-com>
    </div>

js部分

        Vue.component('myCom',{
           template:`<div>{{msg}}</div>`,
            data(){
                return {
                    msg:'全局组件'
                }
            } 
        })
        new Vue({
            el:'#app',
        })

既然有全局组件，那么就有局部组件

components(局部组件)

        const myCom = {
            template:`<div>{{msg}}</div>`,
            data(){
                return {
                    msg:'局部组件'
                }
            }
        }
        new Vue({
            el:'#app',
            components:{
                myCom
            },
            data:{
                msg:'hello Vue'
            }
        })

你会发现全局组件、局部组件和Vue实例的data的值不同，前者是函数返回一个对象，后者是一个对象。这样做能保证数据的统一性，写成一个函数，并且返回新的对象，使得数据是唯一的，否则会当成公共值去处理，组件的data值用Vue实例化的data值来写的话，渲染不出来，并且会报错

计算属性get和set

        const myCom = {
            template:`<div>
                        <div>{{myShow}}</div>
                        <button @click="change">点击</button>
                      </div>`
            ,
            data(){
                return {
                    msg:'hello'
                }
            },
            methods:{
                change(){
                    this.myShow = 'hi'
                }
            },
            computed:{
                myShow:{
                   get(){
                        return this.msg + ' Vue'
                   },
                   set(val){
                       this.msg = val
                   }
                }
            }
        }

props(实现父子间数据传递)

用v-bind指令（:是v-bind:的简写）

    <div id="app">
        <my-com :msg="msg"></my-com>
    </div>

js部分

        const myCom = {
            props:['msg'],
            template: `<div>
                          <div>{{msg}}</div>
                       </div>`,
            data() {
                return {
                    show: 'hello'
                }
            },
        }
        new Vue({
            el: '#app',
            components: {
                myCom
            },
            data:{
                msg:'father'
            }
        })

$emit(自定义事件)

通过子集的输入input值来监听改变父集的data值，从而渲染到页面（v-model是表单输入绑定，在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步）

    <div id="app">
        <div>father:{{sonValue}}</div>
        <my-com @tellme="tell"></my-com>
    </div>

js部分

       const myCom = {
            template: `<div>
                         <input type="text" v-model="value"></input>
                       </div>`,
            data() {
                return {
                    value:''
                }
            },
            watch:{
                value(){
                    this.$emit('tellme',this.value)
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                myCom
            },
            data:{
                sonValue:''
            },
            methods:{
                tell(value){
                    this.sonValue = value
                }
            }
        })

下面简单的做一个验证输入框

    <div id="app">
        <my-inp v-bind="bindmsg"></my-inp>
    </div>

js部分

        const myInp = {
            template: `<div>
                        <span>{{title}}</span>
                         <input type="text" v-model="value"></input>
                         <span>{{msg}}</span>
                       </div>`,
            data() {
                return {
                    value: ''
                }
            },
            props: {
                title: {
                    default: '',
                    type: String
                },
                reg: {
                    type: RegExp,
                    default: null
                },
                errmsg: {
                    type: String,
                    default: 'No'
                },
                sucmsg: {
                    type: String,
                    default: 'Yes'
                }
            },
            computed: {
                msg() {
                    if(this.value != ''){
                        return this.reg.test(this.value) ? this.sucmsg : this.errmsg
                    }
                }
            }
        }
        new Vue({
            el: '#app',
            components: {
                myInp
            },
            data: {
                bindmsg: {
                    title: '请输入QQ邮箱',
                    errmsg: '请重新输入',
                    sucmsg: '正确',
                    reg: /@qq.com/
                }
            }
        })