第五章组件基础

华而有识

已于 2022-11-22 16:02:00 修改

阅读量199

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 3 前端开发实战文章标签： vue.js javascript 前端

于 2022-11-22 16:01:52 首次发布

本文链接：https://blog.youkuaiyun.com/FrontEndEngineer/article/details/127982416

vue.js 3 前端开发实战专栏收录该内容

8 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Vue.js中的组件基础知识，包括数据配置选项如data、props、computed和methods，以及组件间的数据和事件传递。重点讲解了如何使用v-model进行双向数据绑定，并深入探讨了组件插槽的使用，特别是多具名插槽。最后，文章通过动态组件的实例展示了如何利用is属性实现组件的动态切换。

一、Vue应用的数据配置选项

Vue中的createApp()创建Vue应用实例

data 选项为一个javascript函数，提供应用所需的全局数据
props 选项接收父组件传递的数据
computed 选项配置组件的计算属性
methods 配置组件中使用到的方法
watch 对组件属性的变化添加监听函数

定义与使用组件

//定义组件
<script>
   const App = Vue.createApp({})
   const alertComponent = {
      data(){
         return {
             msg:"警告框提示"，
             count:0
         }
      },
      methods:{
         click(){
            alrert(this.msg + this.count++)
         }
      },