Vue基础 · 组件的使用（4）

组件

将公用的功能抽离出来，形成组件；目的：复用代码。

1.1 全局组件

<div id="app">

    <!--引用组件，可多次引用-->
    <demo></demo>

</div>

<script src="../js/vue.js"></script>

<script>
    // 全局组件,第一个参数：自定义名称,第二个：{ }
    Vue.component('demo',{
        // 接收的是字符串
        // 已完成组件的注册
        template:'<h1>test</h1>'
    })

    new Vue({
        el:'#app'
    })
</script>
</body>

我们可以看到，现在前端在div中所显示的是【<h1>test</h1>】，而我们在源码中是【<demo></demo>】，所以<demo></demo>就是我们所创建的全局组件demo，当我们引用时，就会显示【template】定义的值

1.2全局组件中的data使用

<body>
<div id="app">

    <!--引用组件-->
    <demo></demo>

</div>

<script src="../js/vue.js"></script>

<script>
    // 全局组件,第一个参数：自定义名称,第二个：{ }
    Vue.component('demo',{
        // 接收的是字符串
        // 已完成组件的注册
        template:'<h1>msg</h1>',
        // 组件中的data，必须是个方法，如是dict,当有改动时，其他页面有同时在使用的同时也会改变，使用了方法后，因作用域限制，只会作用于vue,其他数据不会变化
        data:function () {
            return{
                msg:'msg'
            }
        }
    })

    new Vue({
        el:'#app'
    })
</script>
</body>

效果展示：

1.3全局组件中methods的绑定使用

<body>
<div id="app">

    <!--引用组件-->
    <demo></demo>
    <demo></demo>

</div>

<script src="../js/vue.js"></script>

<script>
    // 全局组件,第一个参数：自定义名称,第二个：{ }
    Vue.component('demo',{
        // 接收的是字符串
        // 已完成组件的注册
        template:'<h1 @click="change">{{msg}}</h1>',
        // 组件中的data，必须是个方法
        data:function () {
            return{
                msg:'msg'
           }
        },
        methods:{
            change:function () {
                this.msg = 'test'
            }
        }
    })

    new Vue({
        el:'#app',
    })
</script>
</body>

前端页面默认显示：

点击:第一个【msg】后显示：

1.4 全局组件定义后被引用

<body>
<div id="app">

    <test></test>

</div>

<script src="../js/vue.js"></script>
<script>

    Vue.component('test',{
        template:'<div><span>全局组件：{{number}}</sapn>\</div>',
        data:function () {
             return{
                 number: 0
             }
        }
    })

    new Vue({
        el:'#app',
        data:{
        },
        methods:{
        }
    })
</script>
</body>

展示：

2、$refs

主要应用于有组件时

this.$refs：获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签，等同于document.getElementById()

<body>
<div id="app">

    <div ref="test"></div>
    <input type="button" value="test" @click="change">

</div>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods:{
            change:function () {
                // 获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签
                console.log(this.$refs)
            }

        }
    })
    
</script>
</body>

前端展示：

2.1 this.$refs.xxx

<body>
<div id="app">

    <div id="i1" ref="test">ref=test</div>
    <input type="button" value="test" @click="change">

</div>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{

        },
        methods:{
            change:function () {
                // 获取resf的属性，属性就是当前页面：所有定义了ref属性的这一个标签
                // this.$refs.test相当于是document.getElementById('i1')
                console.log('this.$refs.test--->',this.$refs.test)
                console.log("document.getElementById('i1')--->",document.getElementById('i1'))
            }

        }
    })

</script>
</body>

2.2 refs属性使用后所携带的方法

<body>
<div id="app">

    <test ref="a"></test>
    <input type="button" value="test" @click="change">

</div>

<script src="../js/vue.js"></script>
<script>

    Vue.component('test',{
        template:'<div><span @click="add">子组件：{{number}}</sapn>\</div>',
        data:function () {
             return{
                 number: 0
             }
        },
        methods: {
            add:function () {
                // number++: 表示每次+1
                this.number++
            }
        }
    })

    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            change:function () {
                console.log('this.$refs--->',this.$refs)
            }

        }
    })

</script>
</body>

可以拿到number，这么一来，我们就可以获取到number：

    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            change:function () {
                console.log('this.$refs.a.number--->',this.$refs.a.number)
            }

        }
    })

通过绑定ref属性，如果是组件，就可以获取到全局组件中data定义的数据

2.3 通过获取 ref 中number 实现运算

<body>
<div id="app">

    <test ref="a"></test>
    <test ref="b"></test>
    <div>父组件：<span>{{count}}</span></div>
    <input type="button" value="test" @click="change">


</div>

<script src="../js/vue.js"></script>
<script>

    Vue.component('test',{
        //绑定add后，每次点击会+1
        template:'<div><span @click="add">子组件：{{number}}</sapn>\</div>',
        data:function () {
             return{
                 number: 0
             }
        },
        methods: {
            add:function () {
                // number++: 表示每次+1
                this.number++
            }
        }
    })

    new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            change:function () {
                // this.$refs.a.number:获取到a的number值
                this.count = this.$refs.a.number +this.$refs.b.number
            }

        }
    })

</script>
</body>

3、is规避错误

组件化时，如果一个元素是由多个标签组成，内部标签想要组件化，不可以直接使用

<body>
<div id="app">
    <table border="1">
        <thead>
           <th>id</th>
           <th>请求方式</th>
           <th>状态</th>
        </thead>

        <tbody>
        <tr-demo></tr-demo>
        </tbody>

    </table>
</div>

<script src="../js/vue.js"></script>

<script>
    // 创建全局组件
    Vue.component('tr-demo', {
        template: '<tr><td>1</td><td>post</td><td>失败</td></tr>'
    })

    new Vue({
        el: '#app'
    })

</script>
</body>

使用is后：

<body>

<div id="app">

    <table border="1">
        <thead>
           <th>id</th>
           <th>请求方式</th>
           <th>状态</th>
        </thead>

        <tbody>
        <!--is="tr-demo":表示此标已经不是Ta本身了，而是组件“tr-demo”-->
          <tr is="tr-demo"></tr>
        </tbody>

    </table>

</div>

<script src="../js/vue.js"></script>

<script>
    // 创建全局组件
    Vue.component('tr-demo', {
        template: '<tr><td>1</td><td>post</td><td>失败</td></tr>'
    })

    new Vue({
        el: '#app'
    })

</script>
</body>

4、局部组件

<body>
<div id="app">
    <!--引用局部组件-->
    <demo-key></demo-key>

</div>

<script src="../js/vue.js"></script>

<script>

    new Vue({
        el: '#app',
        // 局部组件
        components: {
            // 创建组件后，给组建起个名称，得是："key":{}
            "demo-key": {
                // 绑定@click='change‘，后每次点击：+1
                template: "<h1 @click='change'>{{msg}}</h1>",
                data: function () {
                    return {
                        msg: 0
                    }
                },
                methods: {
                    change:function() {
                        this.msg++
                    }
                }
            },
            // 可创建多个局部组件
            "h2-demo":{
                
            }
        }
    })
</script>
</body>

全局组件与局部组件的区别是：全局组件都可以使用，而局部组件是只可以在本实例中使用

posted @ 2022-12-20 21:08 他还在坚持嘛阅读(21) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

他还在坚持嘛

合作交流，邮箱:1113092340qq.com