Vue中使用组件的三大步骤

Vue中使用组件的三大步骤一、第一步，定义组件(创建组件)使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。//

我不是你不是我

4092人浏览 · 2021-09-22 20:10:05

我不是你不是我 · 2021-09-22 20:10:05 发布

Vue中使用组件的三大步骤

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

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

el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^