Vue3.0 组件基础

一、组件

1. 全局组件 只要定义了，处处可以使用，性能不高，但是使用起来简单。

2. 局部组件 创建以后需要在引入的文件中 使用 components:{ } 进行注册。

二、父子组件的静态和动态传值

1. 静态传值

父组件
const app = Vue.createApp({
    template:`
        
JSPang.com
        
    `
})
子组件
app.component('Son',{
    props:['name'],
    template:`
{{name}} div `
})

2. 动态传值

父组件
const app = Vue.createApp({
    data(){
        return {
            name: "技小胖"
        }
    },
    template:`
        
JSPang.com
        
    `
})
子组件
app.component('Son',{
    props:['name'],
    template:`
{{name}} div `
})

三、组件传值时的校验操作

子组件接收

1. 对类型的校验 Vue支持的校验类型包括:

1 String、2 Boolean、3 Array、4 Object、5 Function 和 6 Symbol。

2. 必填校验 required 和 默认值设置 default；
3. 精准校验-validator，使用方法：

app.component('Son', {
    props: {
        name: {
            type: String,
            validator: function (value) {
                console.log(value.search("JSPang"))
                return value.search("JSPang") != -1
            },
            default: 'JSPang.com'
        }
    },
    template: `
{{name}} div `
})

四、vue也遵从单向数据流概念

官方的解释：
所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。

数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父组件传递过来的数据。

五、Non-props 使用技巧

官方的解释:
其实就是子组件没有接受父组件传递过来的参数，而子组件完全不变的复制了属性到自己的标签上，就叫做Non-props属性。

5.1 inheritAttrs属性【Boolean】 是否接收Non-props属性

5.2 利用 【$attrs】来控制接收哪些参数；

app.component('Hello', {
    mounted() {
        console.log(this.$attrs.msg)
    },
    template: `
    
Hello World
    
Hello World
    
Hello World
    `
})

六、组件通信：通过事件进行通信

6.1 子组件调用父组件事件的编写方法
6.2 子组件向父组件事件中传递参数的方法
6.3 子组件传递参数时，如何通过emits进行校验

【父组件传递】
app.component('Counter', {
	data(){
		return{
			counter:0
		}
	},
    methods: {
	    handleAddCounter(payload) {
	    	console.log("父组件接收的参数",payload)
	        this.counter += 1
	    }
	},
	template: `
    	
JSPang.com
          
	`
})

【子组件接收】
app.component('Counter', {
	props: ['counter'],
	emits: ['add'], 【这里需要使用 emits，对传入的方法进行声明】
	methods: {
	    handleClick() {
        	const payload = {
				a:"asd"
			}
            this.$emit('add',payload)
	    }
	},
})

6.4 对传递值的校验

emits: {
    add: (value) => {
        return value < 20 ? true : false
    }
},

七、插槽 Slot 的使用 7.1-7.4

7.1 插槽的声明

很简单，只要在子组件中加入 solt 标签即可，然后在父组件中使用双标签进行调用。

<script>
    const app = Vue.createApp({
        template: `
        
欢迎光临红浪漫-请选择您的技师
         谢大脚 
        `
    })

    app.component('JiShi', {
        template: `
        

            经过你的慎重考虑.最终选择了。
            
                 

            
        
    `
    })

    const vm = app.mount("#app")
</script>

7.2 插槽的作用域

父模板里调用的数据属性，使用的都是父模板里的数据 子模板里调用的数据属性，使用的都是子模板里的数据

7.3 具名插槽的使用【就是给标签加上一个name属性】

【父组件】
const app = Vue.createApp({
    template: ` 
        
欢迎光临红浪漫-请选择您的技师
        
            
            
            
【具名插槽简写】【具名插槽简写】【具名插槽简写】【具名插槽简写】【具名插槽简写】
         //    
         //    
        
    `
})

【子组件】
app.component('HongLangMan',{
    template:`
        

                
                
2.你选择了大脚为你服务
                
        
    `
})

八、动态组件：可以根据调条件判断展示哪个组件（不再使用 v-show 或者 v-if v-else 等判断条件）

	<component :is="组件名称" />

九、keep-alive 搭配动态组件使用可以做到缓存组件内容

为了保存input框中的文字，可以使用标签，把动态组件包裹起来。

<keep-alive>
    <component :is="showItem" />
keep-alive>

这时候相当启用了缓存，把input框的值存了起来。在使用动态组件时，经常配合标签一起使用。

十、defineAsyncComponent 异步加载组件

app.component('async-component',Vue.defineAsyncComponent(()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve({
                template:`
这是一个异步组件`
            })
        },3000)
    })

}))

十一、多级传值 provide 和 inject （爷爷传给孙子）

<script>
  const app = Vue.createApp({
      data(){
          return {
            house:'北京别墅一套',
            newHouse:"北京200平方房子一套"
          }
      },
【1.爷爷组件定义变量】【1.爷爷组件定义变量】【1.爷爷组件定义变量】
      provide:{
          newHouse:"北京200平方房子一套"
      },
      template: `
          
我有一套房子，我先传给我的儿子
          

          
       `
  })

  app.component('child',{
      props:['house'],
      template:`
          
我是子组件，我要把房子再传给我儿子。
          
儿子接收{{house}}
          

          
      `
  })

  app.component('child-child',{
      props:['house'],
【2.孙子组件接收变量】【2.孙子组件接收变量】【2.孙子组件接收变量】
      inject:['newHouse'],
      template:`
          
我是孙子，等待接收房子
          
孙子接收{{house}}
【3.孙子组件使用变量】【3.孙子组件使用变量】【3.孙子组件使用变量】
          
孙子接收222{{newHouse}}
      `
  })
  const vm = app.mount("#app")
</script>

未完待续…
参考技术胖 https://jspang.com/detailed?id=69
参考 vue3.0 文档 https://v3.cn.vuejs.org/guide/component-registration.html