vue语法（下）

3、组件

    const app = Vue.createApp({
        data(){
            return { num: 123 }
        },
        template:`
            <div>
                <test :content = "num" /> //num为变量，所以使用:content绑定
            </div>
        `
    });
    app.component('test',{
        props:['content'],
        template: `<div>{
  {typeof content}}</div>`
    })

此处的‘test’组件为全局组件，直接<test />使用

在调用局部组件时，需要用component:{}注入

父组件向子组件传值：子组件使用props【】接收

组件之间通过事件通信

const app = Vue.createApp({
             data(){
                return {count:1}
             },
             methods:{
                handleAddOne(param){
                    this.count += param;
                }
             },
             template:`
                <div><counter :count = "count" @add-one = "handleAddOne" /></div>
             `
         });

         app.component('counter',{
             props:[count],
             methods:{
                handleItemClick(){
                    this.$emit('addOne',2);
                }
             },
             template:`
                <div @click = "handleItemClick"></div>
             `
         })

 子组件this.$emit('addOne',2);触发事件，父组件监听@add-one = "handleAddOne" 

对父组件传过来的值类型校验：string f