Vue中使用组件的三大步骤

一、第一步,定义组件(创建组件)

使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
区别如下:

  1. el不要写,为什么? ——— 最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。
  2. data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。
		// 1、定义组件(创建组件):定义student组件
        const student = Vue.extend({
        // 可以简写成如下形式:
        // const student = ({
            template: `
                <div>
                    <p style="color: red">学生姓名: {{ studentName }}</p>
                    <p>性别: {{ studentSex }}</p>
                    <button @click="showStudentName">点我显示学生姓名</button>
                </div>
            `,
            // el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件
            // 都要被一个vm管理,由vm决定服务于哪个容器。
            data() {
                return {
                    studentName: "Luca",
                    studentSex: "男"
                }
            },
            methods: {
                showStudentName() {
                    alert(this.studentName);
                },
            },
        });

二、第二步,注册组件

1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component(‘组件名’,组件)

		// 2、注册组件(全局注册)
        Vue.component('student', student);

        // 首先创建vm
        const vm = new Vue({
            el: "#app",
            // 2、注册组件(局部注册)
            components: {
                // 说明:第一个student为注册的组件名,第二个student为定义的组件名
                // student: student,
                student,
            },
        });

三、第三步,使用组件(写组件标签)

<组件名></组件名>

		<!-- 3、使用组件(书写组件的标签) -->
        <student></student>
        <hr>
        <student></student>
        <hr>
        <student></student>
四、完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的基本使用</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 3、使用组件(书写组件的标签) -->
        <student></student>
        <hr>
        <student></student>
        <hr>
        <student></student>
    </div>
    <script>
        // 1、定义组件(创建组件):定义student组件
        const student = Vue.extend({
        // 可以简写成如下形式:
        // const student = ({
            template: `
                <div>
                    <p style="color: red">学生姓名: {{ studentName }}</p>
                    <p>性别: {{ studentSex }}</p>
                    <button @click="showStudentName">点我显示学生姓名</button>
                </div>
            `,
            // el:'#root', //组件定义时,一定不要写el配置项,因为最终所有的组件
            // 都要被一个vm管理,由vm决定服务于哪个容器。
            data() {
                return {
                    studentName: "Luca",
                    studentSex: "男"
                }
            },
            methods: {
                showStudentName() {
                    alert(this.studentName);
                },
            },
        });

        // 2、注册组件(全局注册)
        Vue.component('student', student);

        // 首先创建vm
        const vm = new Vue({
            el: "#app",
            // 2、注册组件(局部注册)
            components: {
                // 说明:第一个student为注册的组件名,第二个student为定义的组件名
                // student: student,
                student,
            },
        });
    </script>
</body>
</html>
Logo

前往低代码交流专区

更多推荐