一刀一个小黄鱼
一刀一个小黄鱼

Vue/组件

Vue/组件

创建组件

单独声明一个Vue.component，使用只需要在Vue实例下使用定义的组件名

在组件中data不能是一个对象，而必须是一个函数，这个函数返回一个对象

全局组件


      



Vue.component('my-component',{
  data(){
    return {
      name: 'sss'
    }
  },
  template: `
我的第一个组件 - {{name}}}
`
})
//my-component 声明的组件名  
//template 组件的模板

局部组件

放在实例的对象components下，使用只能在实例el下使用

let vm = new Vue({
  el: '#app2',
  components: {
    "child-component": {
       template: `
局部组件 - {{name}}}
`
    }
  }  
})

组件通信

props down, events up,

父组件传递给子组件数据，通过属性传递，子组件传递给父组件数据，通过事件传递




  


Vue.component('my-component',{
  props:['food'], //一个子组件需要通过props中的获得父组件传递的属性信息
  template: `
{{food}}
`
})


//获取实例下数据


    


Vue.component('my-component',{
  props:["food"],
  template:`
    

        
{{food}}

    

    `,
})

new Vue({
  el: '#app',
  data: {
    foods: "苹果"
  }
})

//苹果

子组件可以接收来自父组件的数据，为了保证数据的正确性，完整性，安全性，vue会禁止直接修改父组件的数据，如果非要更改这个数据，一定要通过事件的方式通知父组件

比如上面的我们在模版下定义一个按钮，当点击的时候


     


Vue.component('my-component',{
        props:["data"],
        template:`
                

                    
{{data}}

                      
                

        `,
        methods: {
            click(){
                this.$emit('edit-data',"我要吃苹果")
                //点击后，触发事件
            }
        }
      })
    let vm = new Vue({
        el: '#app3',
        data: {
            foods:
                "苹果"
        },
        methods: {
            callback(v){
                //这边就监听到后，相当于子组件要请求修改数据，通过事件传递给父组件，然后告诉实例，实例自己来修改数据，最后影响到数据的更改
                this.foods = v;
            }
        }
    })
    console.log(vm.foods)

props验证

我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。当组件给其他人使用时,要指定验证规格，需要用对象的形式，而不能用字符串数组：

//在props里通过一个对象来给props来限制条件
Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

非prop属性

如果一个组件标签上的属性没有在props中定义，那么这个属性将会被自动添加到组件的根元素上，对于style和class进行合并（把组件标签上的style或class与区间根元素上的style或class进行合并），但是其他的属性将是覆盖操作


//div background: red; border: 1px solid #000;

    



Vue.component("mArea",{
    props: {
        r: {
            type: Number,
            default: 10
        }
    },
    template: `
        
  
            
面积: {{Math.PI * r * r}}

        

    `
});

let vm = new Vue({
    el: "#app"
})  
//div background: red; border: 1px solid #000;

style标签并没有在props中定义，那就会自动添加在组件模版根元素（div）上，style这个属性也不是被覆盖，而是合并在一起了

插槽slot

在组件模板中通过 来定义一个插槽，在解析的时候，会把对应的内容放到slot位置

一个组件中可以使用多个slot，如果有多个的话，需要给slot设置name属性，没有name的就是默认插槽


  
自身h1标题

  
  
自身的文字

  
自身的文字1111

  



Vue.component('my-component',{
  template:`
  

  
模版文字

  moban
  slot的文字 
  

`
});
//如果外面使用模版，有模版以为的内容，看里面是否有插槽，有就把外面自身的内容放到插槽位置里，没有内容就是用插槽的内容

具名

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。


    
        
没有固定要放的位置

        
我要放的自己的头部内容

        
没有固定要放的位置111

        
我要放的自己的底部内容

        
我要放的自己的头部内容111

    
 


Vue.component('my-component',{
template:`
    

        

                
        

        

            
        

        

                
        



                `
});  

//展示


    

        
我要放的自己的头部内容

        
我要放的自己的头部内容111

    

    

        
没有固定要放的位置

        
没有固定要放的位置111

    

    

        
我要放的自己的底部内容

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在父级中，具有特殊属性 scope 的