Vue-组件

Vue-组件

基本语法

分类:全局注册,局部注册

//全局注册
Vue.component("自定义标签名",{
    //组件模板
    template:`html语句`
    ,data(){
        return{
            //数据类容的键值对
            //调用数据与传统Vue相同 / this.键名
        }
    }
    ,methods:{
        //自定义函数
    }
    //局部组件
    ,components:{"自定义标签名":{
                //数据选项类容与全局组件类似
                //局部组件只有当前组件能够使用
                }}
});
//组件中的data必须是一个函数
//每一个组件就是一个vue实例
//组件是可以嵌套组件的

//注意
//组件命名
    //1.用-连接时，所有单词都需要xiao'xie
    //2.驼峰命名法，单词首字母大写
//组件必须要放在根元素中 - 组件模板中必须是一个整体

 

组件和实例、组件之间是不能进行数据共享的

组件传值

分类:

1. 父传子

   通过属性传递 / props

2. 子传父

   通过事件来传值 / $emit

3. 非父子传值

   通过事件总线 / bus(空的Vue实例,作为一个载体)

   $on("自定义事件名",function(){}) / 发布

   $emit(“相同的自定义事件名”,"参数") / 发布信息