Vuejs中组件开发从初级到高级(一)

百度已收录   阅读次数: 61
2021-10-2416:53:14 发表评论
摘要

伯衡君此前分享了那篇入门Vuejs的文章中就有涉及到组件内容,具体可以参看下方的前情提要,本篇文章主要是继续探讨Vuejs中组件的从初级到高级的开发步骤,以加深对Vuejs的学习和了解,本篇文章将着重将一些难以理解的部分简单化,以降低学习难度,分享给大家……

Vuejs中组件开发从初级到高级(一)

开篇寄语

伯衡君此前分享了那篇入门Vuejs的文章中就有涉及到组件内容,具体可以参看下方的前情提要,本篇文章主要是继续探讨Vuejs中组件的从初级到高级的开发步骤,以加深对Vuejs的学习和了解,本篇文章将着重将一些难以理解的部分简单化,以降低学习难度,分享给大家。

前情提要

内容详情

本篇文章以Vue3版本为例,Vue2版本与之区别不是很大。

  • 全局组件
    • 先将之前在入门文章中介绍的组件构造方法列出来,以加深回忆,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs Demo</title>
</head>
<body>
    <div id="app">
        <helloworld></helloworld>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script>
        const app = Vue.createApp({});
        app.component('helloworld', {
            data() {
                return {
                    msg: "Hello World"
                }
            },
            template: `<h1>{{ msg }}</h1>`,
        })
        app.mount("#app")
    </script>
</body>
</html>

从中可以看出,使用Vuejs创建了一个名为<helloworld></helloworld>的组件,而实际内容,则是在template中设置好的。

其中,

app.component('helloworld', {
  data() {
    return {
      msg: "Hello World"
    }
  },
  template: `<h1>{{ msg }}</h1>`,
})

"helloworld"是声明了一个组件,相当于js中的var/const/let。

  • 局部组件
    • 声明组件,在Vuejs中又分为全局声明和局部声明,上面那个例子就是一个全局声明的例子,接下来介绍一下局部声明的例子,示例如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        <helloworld></helloworld>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script>
        const cpnc = {
            template: `
        <div>
          <h2>Title</h2>
          <p>.......</p>
          <p>.......</p>
        </div>`
        }
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
            components: {
                'helloworld': cpnc,
            }
        });
        app.mount("#app")
    </script>
</body>

</html>
  • 父子组件
    • 即两组组件中,一组组件使用了另一组组件,试举例如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        <helloworld>
        </helloworld>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script>
        const cpnb = {
            template: `
        <div>
          <button>Click Me</button>
        </div>`,
        }
        const cpnc = {
            template: `
        <div>
          <h2>Title</h2>
          <p>.......</p>
          <abc></abc>
          <p>.......</p>
        </div>`,
            components: {
                'abc': cpnb,
            }
        }
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
            components: {
                'helloworld': cpnc,
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

可以看出cpnc引用了cpnb声明的组件abc。

  • 分离写法
    • 除了之前所写的方式,还可以通过分离的写法来实现,比如:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        <helloworld>
        </helloworld>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script type="text/x-template" id="cpn1">
        <div>
            <h2>Title</h2>
            <p>......</p>
        </div>
    </script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
            components: {
                helloworld: {
                    template: '#cpn1'
                },
            }
        });
        app.mount("#app")
    </script>
</body>

</html>

还有一种形式,类似于下面这样:

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

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        <helloworld>
        </helloworld>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <template id="cpn1">
        <div>
          <h2>Title</h2>
          <p>......</p>
        </div>
    </template>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
            components: {
                helloworld: {
                    template: '#cpn1'
                },
            }
        });
        app.mount("#app")
    </script>
</body>

</html>
  • 数据存放
    • 在组件内部进行数据传递,则需要加一个data()
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        <helloworld>
        </helloworld>
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <template id="cpn1">
        <div>
          <h2>{{ count }}</h2>
          <button @click="count++">Add</button>
          <button @click="count--">Subtract</button>
        </div>
    </template>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    msg: "Hello World"
                }
            },
            components: {
                helloworld: {
                    template: '#cpn1',
                    data() {
                        return {
                            count: 1
                        }
                    }
                },
            }
        });
        app.mount("#app")
    </script>
</body>

</html>
  • 父组件向子组件传递数据
    • 父组件向子组件传递数据需要用到props属性,props向下传递,事件向上传递,也就是父组件通过 prop 给子组件下发数据,子组件通过 $emit 事件, 给父组件发送数据。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>

<body>
    <div id="app">
        Content:{{ text }}<br>
        <com-input :text="text" v-on:change="handleChange" />
    </div>
    <script src="https://unpkg.com/[email protected]"></script>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    text: "Hello World"
                }
            },
            methods: {
                handleChange(val) {
                    this.text = val.path[0].value;
                }
            }
        });
        app.component('com-input', {
            props: {
                text: {
                    type: String,
                    default: "请输入"
                }
            },
            template: '<input v-model="msg"/>',
            data() {
                return {
                    msg: this.text
                }
            },
            methods: {
                handleChange(e) {
                    this.$emit('change', this.msg)
                }
            }
        })
        app.mount("#app")
    </script>
</body>

</html>

初步了解组件的开发后,下一篇文章则是更为精进的了解组件的高级用法了。

分享至:
  • 我的微信
  • 微信扫一扫加好友
  • weinxin
  • 我的微信公众号
  • 扫描关注公众号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: