vue3.js

    1.         总结: 此处涉及的vue3新特性<br />            1, vue3中的组件使用字面量对象创建<br />            2, vue3中的组件不能直接在父组件使用,需要在父组件components字段中定义后,方可使用<br />            3, vue3中组件支持多个根标签<br />            4, setup函数的第一个参数props用于接收父组件传值<br />            5, setup函数的第二个参数context.emit用于向父组件传值<br />            6, 子组件发射的自定义事件需要在emits字段中提前声明<br />            7, 组件发射的自定义事件名,定义时可用小驼峰,绑定时用小写<br />            8, 组件标签上没有在props中声明的属性会被传入context.attrs中<br />            9, 在vue3中组件传值, 插槽传值, props属性传值, emit事件传值和vue2结构原理基本一致, 但vue3不能用总线传值
    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'>
    4.         <!-- 子传父发射的自定义事件名可以是小驼峰,绑定时用小写 -->
    5.         <my-com :child-arr="fatherArr" @my-event="getData" myid="250">
    6.             <i>插槽数据</i>
    7.         </my-com>
    8.     </div>
    9.     <template id="com">
    10.         <div>
    11.             子组件  :  <slot>插槽传值和vue2一样</slot>
    12.             <ul>
    13.                 <li v-for="item in childArr">{{item}}</li>
    14.             </ul>
    15.         </div>
    16.         <!-- vue2要求组件模板有且仅有一个根标签, vue3支持多个根标签 -->
    17.         <slot></slot>
    18.         <div v-for="item in childArr">{{item}}</div>
    19.     </template>
    20.     <script>
    21.         // vue2创建组件的写法, 在vue3中已废除
    22.         // Vue.component("myCom",{ template: "<h1></h1>" })
    23.         // vue3中直接用字面量对象创建组件
    24.         var myCom = {
    25.             template: "#com",
    26.             props: ['childArr'],
    27.             // vue3中要求组件发射的自定义事件,在emits字段中声明
    28.             emits: ["myEvent"],
    29.             setup(props, context) {
    30.                 // setup第一个参数是props自定义属性所在的对象
    31.                 console.log(this, props, props.childArr[0])
    32.                 // setup第二个参数是context上下文信息对象, 他不是组件对象this, 但可以用它进行发射自定义事件
    33.                 console.log(context, context.attrs.myid)
    34.                 // 组件标签上没有在props中声明的属性会被传入context.attrs中
    36.                 // vue3发射的自定义事件名支持大写
    37.                 context.emit("myEvent", "子组件发送的数据")  
    38.             }
    39.         }
    40.         var vm = {
    41.             // vue3要求子组件必须在父组件的components中定义才能使用
    42.             components: {
    43.                 myCom
    44.             },
    45.             setup() {
    46.                 var fatherArr = Vue.reactive(['a','b','c','d'])
    47.                 function getData(data){
    48.                     console.log("子传父:", data)
    49.                 }
    50.                 return {
    51.                     fatherArr, getData
    52.                 }
    53.             }
    54.         }
    55.         Vue.createApp(vm).mount('#myApp')
    56.     </script>
    57. </body>