vue组件基础

最新推荐文章于 2024-09-06 22:20:29 发布

李码王

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量94

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50220069/article/details/109676234

版权

vue组件基础

组件

mvvm 数据驱动组件化
组件：网页上组成部分（预定义组件、自定义组件）
组件语法:
组件也是Vue的实例（new Vue 他有的属性组件都有）

  // 全局组件（挂载到Vue上，可以在任意组件以及实例的模板中使用）
  Vue.component(组件名,{
    template:`
      <div>
        xx
        xxx
      </div>
    `,
    data(){
      return {

      }
    },
    methods:{},
    watch:{},
    computed:{}
  })
  /* 
  注意：
    1，template 必须 有且只有一个根组件（除非使用v-if 或者 v-else-if才能出现多个）
    2，data属性 必须是一个方法 返回这个对象 组件会被复用（形成自己作用域，每一次都会重新开辟空间 ，多次使用不会互相影响）
    3，组件有 自己作用域 属性。方法等 都只能在自己内部使用
  */

 //  局部组件（挂载到其他的组件或者实例上，只能在挂载的组件中使用）
//  定义组件组件
 const SubTitle = {
      template:`
        <div>
          我是一个局部组件 
          {{ title }} 
        </div>
      `,
      data(){
        return {
          title:"我是局部组件数据"
        }
      }
    }

// 其他组件中注册
Vue.component("Home",{
  template:`
    <div>
      <sub-title></sub-title>
    </div>
  `,
  components:{
    SubTitle
  }
})
/* 
局部组件 是在 其他组件 的components属性中注册
注意只能在 组件的组件的template使用，无法在外部使用
*/

组件关系

由于组件嵌套使用形成父子、兄弟关系

组件通信

父–子 props通信

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <common-head></common-head>
    </div>
    
    <script src="./vue.js"></script>
    <script>
        //定义局部组件
        const SubTitle = {
            template:`
            <div>
                我是局部组件
                {{ title1 }}
                {{ title2 }}
                {{ title }}
            </div>
            `,
            props:["title1","title2"],
            //接收父组件传的属性
            data(){
                return {
                    title:"我是局部组件内部数据"
                }
            }
        }
        //定义全局组件
        const CommonHead={
            template:`
            <div>
                <h1>我是公共的头部</h1>  
                <button @click="changeMsg">按钮</button>
                {{msg}}
                <h2>嘿嘿嘿</h2>
                <sub-title title1="我是父传子1" title2="我是父传子2"></sub-title>
                
            </div>
            `,//要传子的属性写在标签中
            data(){
                return{
                    msg:"我是全局组件的数据"
                }
            },
            methods:{
                changeMsg(){
                    this.msg="数据改变了"
                } 
            },
            components:{
                SubTitle
            }
        }
        Vue.component("CommonHead",CommonHead)
        const vm = new Vue({
            el:'#app'
        })
    </script>
</body>
</html>

//通过props
/* 
子组件中 定义props属性 props是一个数组 数组中定义待接收的 属性列表
props待接收列表会 渲染到 组件实例的 属性上 跟data中的数据是同级别的
注意：
  props key不要和 实例中已经存在属性重名（如data中的属性以及计算属性）
 */

const Child = {
  template:`
    <div>
      {{ title }}
      {{ title2 }}
    </div>
  `,
  props:['title','title2']
}
// 传递
const Father = {
  template: `
    <div>
      <child title="父组件的静态数据" :title2="msg"></child>
    </div>
  `,
  data(){
    return {
      msg:"父组件中动态数据"
    }
  }
}

// props验证

{
  props:{
    a:String, // 只验证 类型，可以简写，直接写类型的值
    b:[String,Number], // 只验证类型，类型有多个 扔到数组中
    c:{
      type:String,
      required:true
    },
    d:{
      type: Number,
      default:10
    },
    e:{
      type:Array, // 如果类型是数组或者对象，默认值应该是函数返回默认值
      default: ()=> [1,2,3,4]
    }
  }
}

子向父通信自定义事件

子组件中
  this.$emit("事件",参数); //触发子组件的一个自定义的事件

在父组件中
  <child @自定义事件="fn"></child>

  {
    methods:{
      fn(参数){
        // 触发
      }
    }
  }

兄弟组件通信自定义事件事件中心总线（event bus）

利用一个第三方的实例 bus（event bus）
bus 触发自定义事件
由bus来监听这个事件
实例.$on(事件,回调)

const bus = new Vue();
bus.$emit("事件",参数)

bus.$on("事件",fn)

一下三种不太重要

ref组件通信（记住）

父组件中
  <child ref="child"/>
this.$refs.child 获取子组件的实例
this.$refs.child.xx直接获取子组件data中的数据
this.$refs.child.xx() 直接调用子组件的方法

$parent $children

子组件中
  this.$parent直接拿到父组件的实例
父组件中
  this.$children 拿到的是 父组件中的所有子组件（数组）

provide inject

父组件
  {
    provide:{
      a:10,
      b:20
    },
    template:'',
    data,
    xx
  }
  
  子组件中
  {
    inject:['a','b'] // 自动灌入到子组件上作为属性 所以可以直接通过this.a this.b拿到
  }

李码王

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件基础

vue组件基础组件组件关系组件通信父--子 props通信子向父通信自定义事件兄弟组件通信自定义事件事件中心总线（event bus）ref组件通信（记住）$parent $childrenprovide inject组件mvvm 数据驱动组件化组件：网页上组成部分（预定义组件、自定义组件）组件语法:组件也是Vue的实例（new Vue 他有的属性组件都有） // 全局组件（挂载到Vue上，可以在任意组件以及实例的模板中使用） Vue.component(组件名,
复制链接

扫一扫