Vue 快速入门(五)

 

 

本节介绍Vue入门级组件概念

 

01 - Vue组件

组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

 

 

在编写组件时，我们需要不断思考如何提高组件的可复用性。组件是可复用的 Vue 实例， 我们可以把页面中在多个场景中重复使用的部分，抽出为一个组件进行复用。组件大大提高了代码的复用率。

 

  • 全局组件注册

我们可以通过调用 Vue.component 的方式来定义全局组件，它接收两个参数：

1. 组件名

2. 组件属性对象

ps: 组件的属性对象即为 Vue 的实例对象属性。

全局组件可以在任何其他组件内使用，所以当我们设计的组件，需要在不同地方使用的时候，我们应当注册全局组件。

// 注册
// 驼峰命名
Vue.component('MyComponentName', {/* */})
// 短横线命名
Vue.component('my‐component‐name', {/* */})
......
// 使用
<my‐component‐name></my‐component‐name>
// 也可以使用自闭和的方式
 <my‐component‐name />

 

具体看代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <my-component></my-component>
        <my-component />

    </div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component('my-component', {
        template: '<div><strong>Hello</strong> </div>'
    })
    var vm = new Vue({
        el: '#app',
        data() {
            return {}
        }
    })
</script>

</html>

　　

代码解释：

JS 代码第 3-5 行，我们注册了一个全局组件 my-component，并在 html 内使用两种方式引用了该组件。

全局变量中子组件使用父组件定义的变量，可以这样做，如下示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

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

    <div id="app">
        <!-- 全局組件内部定义变量时使用 -->
        <testcp></testcp>
        <!-- 子组件继承父组件的变量时使用 -->
        <testcp v-bind:nump="nums"></testcp>
    </div>
    <script>
        Vue.component('testcp', {
            template: `<div @click='num++'>{{nump}}</div>`,
            // data() {
            //     return {
            //         nump: 10
            //     }
            // },k
            props: ['nump']
        })
        new Vue({
            el: '#app',
            data: {
                nums: 100,
            }
        })
    </script>
</body>
</html>

　　

  • 局部组件注册

我们也可以在 Vue 实例选项中注册局部组件，这样组件只能在这个实例中使用。局部组件的注册利用 Vue 实例的 components 对象属性，以组件名作为 key 值，以属性对象作为 value。

由于局部组件只能在当前的 Vue 实例中使用，所以当我们设计的组件不需要在其他组件内复用时，可以设计为局部组件。

//注册
components: {
'MyComponentName': {
template: '<div>Hello ！</div>'
}
}
......
// 使用
<my‐component‐name></my‐component‐name>
// 也可以使用自闭和的方式
<my‐component‐name />

　　

写法如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <my-component></my-component>
        <my-component />

    </div>
    <div id="app2">
        <div>这是app2</div>
        <my-component></my-component>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        // Vue.component('my-component', {
        //     template: '<div><strong>Hello</strong> </div>'
        // })
        var vm = new Vue({
            el: '#app',
            data() {
                return {}
            },
            components: {
                'my-component': {
                    template: '<div>Hello </div>'
                }
            }
        })
        new Vue({
            el: "#app2",
             data: {
                 numxx: 100
             }
        })
    </script>

</html>

综上所述，在vue中只有一个html文件，所有的页面都是通过组件(模板)的方式来声明和渲染的，一个组件就是一个页面，也就是.vue文件，组件里面可以有子组件，所有组件都挂载根实例下面(app下面)。

 

本节主要介绍Vue组件的相关概念，以及代码示例方便来理解。后面可以更好的应用Vue。

 

posted @ 2023-01-24 14:47  全栈测试开发日记  阅读(41)  评论(0)    收藏  举报