Vue3.0笔记（2021-11-12）01

最新推荐文章于 2024-09-18 09:53:11 发布

Clience01

最新推荐文章于 2024-09-18 09:53:11 发布

阅读量1.6k

点赞数 16

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

本文链接：https://blog.csdn.net/Clience01/article/details/121282633

版权

VUE3.0 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue3 提供了强大的组件系统，允许开发者通过封装可复用代码构建复杂应用。组件可以全局或局部注册，如示例所示，创建并使用`button-counter`组件。此外，组件间可以通过props进行数据传递，实现父组件向子组件的数据流动，支持动态prop以应对变化的数据需求。

摘要由CSDN通过智能技术生成

Vue3 组件

可以扩展HTML元素，封装可重复的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

将Vue应用挂载到

,应该传入#app：

const RootComponent={/*选项*/}
const app=Vue.createApp(RootComponent)
const vm=app.mount('#app')

全局组件

注册一个全局组件的语法格式

 const app=Vue.createApp({....}}
    app.component('todo-item',{
           /* ... */
       })

todo-item为组件名， /* … */为部分内容配置选项，注册后，外面可以用以下方式调用组件

 <todo-item></todo-item>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <button-counter></button-counter>
        <button-counter></button-counter>
        <button-counter></button-counter>
    </div>
    <script>
      //创建一个vue应用
      const app=Vue.createApp({})

      //定义一个名为 button-counter 新全局组件
      app.component('button-counter',{
        data(){
              return{
                  count:0
              }
          },
          template:`<button @click="count++">点了{{count}}次</button>`
      })
      app.mount('#app')
    </script>
</body>
</html>

局部组件

全局组件所有的组件意味着即便你已经不再使用一个组建了，他仍然会被包含在你的最终构建结果中。这造成了用户下载的javaScript的无所谓的增加。

用一个普通的js对象来定义组件

const ComponentA={
/*   */
}

const ComponentB={
/*   */
}

const ComponentC={
/*   */
}

然后再components选项中定义你想要使用的组件:

const app=Vue.createApp({
   components:{
    'component-a':ComponentA,
    'component-b':ComponentB
    }
    })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <runoob-a></runoob-a>
      
    </div>
    <script>
     //定义一个名为 button-counter 新局部组件
    var runoobA={
        template:`<h1>自定义组件</h1>`
    }


      //创建一个vue应用
      const app=Vue.createApp({
        components:{
              'runoob-a':runoobA
          }
      })

    
      app.mount('#app')
    </script>
</body>
</html>

prop

是子组件用来接收父组件传递过来的数据的一个自定义属性。
父组件的数据通过props把数据传给子组件，子组件需要显式的用props选项声明’prop’

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <site-name title="Google"></site-name>
        <site-name title="Runoob"></site-name>
        <site-name title="Taobao"></site-name>
      
    </div>
    <script>
     const app=Vue.createApp({})

     app.component('site-name',{
         props: ['title'],
         template:`<h4>{{title}}</h4>`
         
     })
     app.mount('#app')
    </script>
</body>
</html>

动态prop

类似于用v-bind绑定HTML特性到一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中，每当父组件的数据变化时，该变化也会传给子组件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <site-info v-for="site in sites" :id="site.id" :title="site.title"></site-info>
    </div>
    <script>


        const Site = {
            data() {
                return {
                    sites: [
                        { id: 1, title: 'Google' },
                        { id: 2, title: 'Runoob' },
                        { id: 3, title: 'Taobao' }
                    ]
                }
            }
        }

        const app = Vue.createApp(Site)

        app.component('site-info', {
            props: ['id', 'title'],
            template: `<h4>{{id}}-{{title}}</h4>`

        })
        app.mount('#app')
    </script>
</body>

</html>