Vue（初识四-组件）

最新推荐文章于 2024-05-06 20:19:36 发布

㏒灵韵№

最新推荐文章于 2024-05-06 20:19:36 发布

阅读量188

点赞数 2

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/daai5201314/article/details/125006702

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue（初识四）

组件特点
全局组件
局部组件
组件嵌套
组件通信的几种情况
- 父子组件传值-props属性
组件和模块的区别

组件特点

场景: 重复的页面结构,数据,逻辑都可以抽提成一个组件
特点: 简单高效不重复
组件和实例相似之处: data/methods/computed/watch 等一应俱全

注意：

data和Vue实例的区别为
组件中data为一个函数且需要返回一个对象
组件没有el选项
template 代表其页面结构 (有且只要一个根元素)
每个组件都是独立的运行作用域、数据、逻辑没有任何关联

全局组件

全局和局部: 注册方式不同应用范围不同
注意: 注意命名规范
路径: 实现一个全局组件

定义一个全局组件
写入组件选项
使用组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <content-a></content-a>
        <content-a></content-a>
        <content-a></content-a>
        <content-a></content-a>
        <content-a></content-a>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 全局组件
        Vue.component('content-a', {
            template: `<div>
                    <h1>我是全局组件</h1>
                    <h2>{{msg}}</h2>
                </div>`,
            data() {
                return {
                    msg: '我是小暴龙'
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '123'
            }
        })
    </script>
</body>

</html>

案例：实现一个全局组件完成加减步进器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <content-step></content-step>
        <content-step></content-step>
        <content-step></content-step>
        <content-step></content-step>
    </div>
    <script src=" ./vue.js"> </script>
    <script>
        Vue.component("content-step", {
            template: `
            <div>
                <button @click="add">加</button>
                <span>{{count}}</span>
                <button @click="cut">减</button>
            </div>
                `,
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                add() {
                    this.count++
                },
                cut() {
                    this.count--
                }
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {}
        })
    </script>
</body>

</html>

局部组件

局部组件的实现
1.在实例选项compoents中定义局部组件名字
2.在组件名字相对应的对象中定义选项(template、data()、…)
3.在实例视图中使用组件

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <z-j></z-j>
        <z-j></z-j>
        <z-j></z-j>
        <z-j></z-j>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {},
            // 局部组件
            components: {
                "z-j": {
                    template: '<h1>我是局部组件{{msg}}</h1>',
                    data() {
                        return {
                            msg: '我是小白龙'
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

组件嵌套

全局组件嵌套全局组件
局部组件嵌套全局组件
注意: 组件嵌套和全局及局部组件没关系

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <parent-a></parent-a>
        <com-a></com-a>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 全局组件
        Vue.component('child-a', {
            template: '<h2>我是child-a组件</h2>'
        })
        Vue.component('child-b', {
            template: '<h2>我是child-b组件</h2>'
        })
        Vue.component('parent-a', {
            template: `
                <div>
                    <child-a></child-a>
                    <child-b></child-b>
                </div>
            `
        })
        let vm = new Vue({
            el: '#app',
            data: {},
            // 局部组件
            components: {
                "com-a": {
                    template: `<h1>我是局部组件
                        <parent-a></parent-a>
                    </h1>`,
                    data() {
                        return {
                            msg: '我是小白龙'
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

组件通信的几种情况

组件嵌套 => 父子组件 => 父组件传递数据给子组件使用 => 组件之间的传值 => 也叫组件之间的通信
组件之间的通信根据关系的可以分为:

父子组件通信
父组件到子组件
子组件到父组件
兄弟组件通信

父子组件传值-props属性

父子组件的传值有多种方法, 兄弟组件的通信也有自己的写法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 子组件 -->
        <child-a :msg="msgP"></child-a>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('child-a', {
            template: `
                <div>
                    我是子组件{{count}}
                    {{msg}}
                </div>
            `,
            data() {
                return {
                    count: 100
                }
            },
            props: ['msg']
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msgP: '我是父组件'
            }
        })
    </script>
</body>

</html>