Vue - 标准开发方式、组件（全局、局部、props、事件传递）、插槽的使用

﹏ヽ暗。殇╰゛Y 2024-03-02 10:55 6阅读 0赞

**目录**

一、Vue

1.1、标准开发方式

1.2、组件的使用

1.2.1、全局组件

1.2.2、局部组件

1.2.3、props 传递静态数据

1.2.4、props 传递动态数据

1.2.5、事件传递

1.2.6、插槽slot

--------------------

## 一、Vue ##

--------------------

### 1.1、标准开发方式 ###

Vue 的标准开发方式是 SPA（Single Page Application）：单页面web 应用，也就是收，日后的项目中只有一张页面（index.html）.

为什么要使用 SPA 开发方式？

1.  Vue 官方推荐：一个应用中只能存在一个 Vue 实例.
2.  复用：Vue 提供了 Component 组件，不仅减少了 Vue 实例的代码量，还可以实现复用.
3.  解耦合：一个组负责完成项目中的一个功能或者一组功能，实现业务隔离.

### 1.2、组件的使用 ###

#### 1.2.1、全局组件 ####

全局组件：直接注册到 Vue 根实例组件中.

定义方式：Vue.component(' ', \{\}) ，第一个参数是组件名，第二个参数是配置对象.

> Ps：无论是使用全局组件还是局部组件，都必须在组件 template 中添加唯一根元素.

如下代码：

<div id="app">
            
            <register></register>
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
            //定义全局组件(生效的前提是要有 Vue 实例, 并在实例的作用域中使用)
            Vue.component('register', {
                template: `<div><h1>注册</h1><span>{
       {msg}}</span><span>{
       {counterSqrt}}</span><comp></comp></div>`,
                data() { //组件中定义数据，必须函数的形式(和 Vue 实例定义唯一的区别)
                    return { //返回值是一个对象，对象内部就是数据
                        msg: "我是注册全局组件中的数据",
                        count: 2
                    }
                },
                methods: { //给组件定义一些方法
                    test() {
                        console.log("我是组件中的方法");
                    }
                },
                computed: { //给组件定义一些计算属性
                    counterSqrt() {
                        return this.count * this.count;
                    }
                },
                components: { //给组件中定义一些组件
                    comp: {
                        template: `<div>我是全局组件的子组件</div>`
                    }
                },
                beforeCreate() { //组件也有自己的生命周期
                    console.log("beforeCreate:", this.msg);//此时 msg 因该是 undefine
                }
                //......
            });
    
            const app = new Vue({ //没有这里，组件就不会生效
                el: "#app"
            });

效果如下：

![3a4831cf71564744b5ba81db8a473dd2.png][]

#### 1.2.2、局部组件 ####

局部组件：只能在注册组件中使用组件.

代码如下：

<div id="app">
            <login></login>
            <reg></reg>
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
    
            //定义局部组件(这是另一种方式，现在外部定义好，再到局部注册组件中引入)
            //Ps：在子组件中不可使用父组件的数据! 比如 parent 数据
            const login = {
                template: `<div><h1>登录</h1><div>{
       { child }}{
       { counterSqrt }}</div><comp></comp></div>`,
                data() {
                    return {
                        child: "我是注册组件的子组件 login 中的数据",
                        count: 3
                    }
                },
                methods: { //给组件定义一些方法
                    test() {
                        console.log("我是组件中的方法");
                    }
                },
                computed: { //给组件定义一些计算属性
                    counterSqrt() {
                        return this.count * this.count;
                    }
                },
                components: { //给组件中定义一些组件
                    comp: {
                        template: `<div>我是子组件的子组件</div>`
                    }
                },
                beforeCreate() { //组件也有自己的生命周期
                    console.log("beforeCreate:", this.child);//此时 child 因该是 undefine
                }
                //......
            }
    
            let app = new Vue({
                el: "#app",
                data: {
                    parent: "我是父组件中的数据"
                },
                components: { //注册组件
                    login, //也可以单独在外面定义好组件，然后引入
                    reg: {
                        template: `<div><div>{
       { child }}</div></div>`,
                        data() { //注意组件中数据的写法
                            return {
                                child: "我是子组件 reg 中的数据"
                            }
                        }
                    }
                }
            });
        </script>

效果如下：

![70eee18590d6440aaba6684ea49660ac.png][]

#### 1.2.3、props 传递静态数据 ####

父组件向子组件传递静态数据：在使用的组件标签上，声明静态数据 key=value (key 是自定义的)，最后在子组件的 props 中声明对应的 key 即可

代码如下：

<div id="app">
            
            <login name="hello?" count="1"></login>
    
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
    
            const login = {
                template: `<div><h1>登录</h1><div>{
       { name }} --- {
       { count }}</div></div>`,
                data() {
                    return {
                        //这里相当于添加了 name: "hello?", count="1"
                    }
                },
                props: ['name', 'count'] //用来接收父组件传来的数据, 这就相当于在子组件的 data 中添加了这个静态数据
            }
    
            const app = new Vue({
                el: "#app",
                components: {
                    login //注册组件
                }
            });
    
        </script>

效果如下：

![919709cfd4be417fb2c9edef206ea50e.png][]

#### 1.2.4、props 传递动态数据 ####

向子组件传递动态数据：

1.  在组件标签上声明 key=value (key 是自定义的，value 就是 Vue 实例中的 data)，子组件内部使用 props 数组声明 key
2.  声明的自定义 key 可以通过 v-bind 进行属性的动态绑定

> Ps：Vue 官方明确提出只允许单向数据流，也就是只能从父传递到子，否则会报警告

代码如下：

<div id="app">
            
            <login :aa="count"></login>
            <input type="text" v-model="count">
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
    
            const login = {
                template: `<h1><div>登录</div><h2>{
       { aa }}</h2><button @click="add()">点我增加数字<button></h1>`,
                data() {
                    return {
    
                    }
                },
                props: ['aa'],
                methods: {
                    add() {
                        this.aa++;//props 声明的数据，就相当于直接 data 中添加了该数据
                    }
                }
    
            }
    
            const app = new Vue({
                el: "#app",
                data: {
                    count: "1"
                },
                components: {
                    login
                }
            });
    
        </script>

> 最后的效果：

1.  修改 input 中的值
2.  由于 v-model 动态绑定到 Vue实例中的 data 的 count 数据也随之变化
3.  由于 login 组件中声明的属性 aa 动态绑定了 count，导致 属性aa 也随之变化

如下图

![57bc3a51b41c4e33b3d6c8d70714d3dc.png][]

#### 1.2.5、事件传递 ####

父向子传递事件：在组件标签上定义 @key=value (@自定义事件名=父组件中的事件名) 即可

代码如下：

<div id="app">
            
            <login @aa="testParent()" @bb="testParent2" @cc="testParent3"></login>
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
            const login = {
                template: `<div><h2>登录</h2><button @click="testChild()">点给我调用父组件中的事件</button></div>`,
                data() {
                    return {
                        count: 10
                    }
                },
                methods: {
                    testChild() {
                        alert("我是子组件中的事件!");
                        //通过 this.$emit 来调用父组件中的事件 
                        //参数1:组件标签上定义的事件名
                        //后续参数: 参数1 后面还可以继续传递参数，作为父组件事件中的参数
                        this.$emit("aa");
                        this.$emit("bb", this.count); //Vue 官方说只能单向传递(父传子)，但是这种方式可以实现
                        this.$emit("cc", { count: this.count, name: "cyk", isGood: true });
                    }
                }
            }
    
            const app = new Vue({
                el: "#app",
                methods: {
                    testParent() {
                        alert("1.我是父组件中的事件!");
                    },
                    testParent2(count) {
                        alert("2.我是父组件中的事件!");
                        console.log("获取到子组件的值:" + count);
                    },
                    testParent3(obj) {
                        alert("3.我是父组件中的事件!");
                        console.log("获取到子组件的值: count=" + obj.count + ", name=" + obj.name + ", isGood=" + obj.isGood);
    
                    }
                },
                components: {
                    login
                }
            });
        </script>

效果如下：

![6d3e4ddf26e74f57aa2435721f6e4a63.png][]

#### 1.2.6、插槽slot ####

插槽就是用来扩展现有组件的.

代码如下：

<div id="app">
    
            
            <login></login>
            
            <hr>
            <login><span>hello</span></login>
            
            <hr>
            <login><button slot="aa" @click="parent()">点我</button></login>
        </div>
    
        <script src="../js/vue.js"></script>
        <script>
    
            const login = {
                template: `<div><slot name="aa"></slot><h1>登录</h1><slot name="bb"></slot></div>`,
            }
    
            const app = new Vue({
                el: "#app",
                methods: {
                    parent() {
                        alert("我是父组件的事件");
                    }
                },
                components: {
                    login
                }
            });
    
        </script>

效果如下：

![ba3c8f6c33844294a28b222fe8031914.png][]

![43acda6f2a994ff6b1794ddb037d2153.gif][]

[3a4831cf71564744b5ba81db8a473dd2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/32d2b5428df54d92a91609f787b5c7a6.png
[70eee18590d6440aaba6684ea49660ac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/fe0a39c6fb5745b1bd5be081f18b9be3.png
[919709cfd4be417fb2c9edef206ea50e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/d88045fe98dc4ba7b8c4c40c9f30e21e.png
[57bc3a51b41c4e33b3d6c8d70714d3dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/864479d6e75e4d398d88e578c8b4f00a.png
[6d3e4ddf26e74f57aa2435721f6e4a63.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/89ee05e2870c40eea0df1f7f7089d49c.png
[ba3c8f6c33844294a28b222fe8031914.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/f11db1a92319462f90d4e840a6205e8c.png
[43acda6f2a994ff6b1794ddb037d2153.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/02/44d6c6b9a891432ebdcfc92288b21f37.png