vue3.js

    1.         总结: 此处涉及的vue3新特性<br />            1, 父子组件双向绑定, 子组件中props定义的属性名可自定义, 把属性名用冒号拼接到v-model后, 父组件的数据方可正常传入子组件<br />            2, 父子组件双向绑定, 子组件发射的事件名必须是update事件, update后用冒号拼接需要更新的props属性名, 父组件方可正常接收子组件发射的数据
    1. <body>
    2.     <script src='./vue3.js'></script>
    3.     <div id='myApp'>
    4.         父组件: <input type="text" v-model="msg">  {{msg}}
    5.         <hr>
    6.         <!-- vue3双向绑定v-model后添加冒号指定props属性(属性名时props中声明的)-->
    7.         子组件: <my-com v-model:title="msg"></my-com>
    8.     </div>
    9.     <template id="com">
    10.             <input type="text" :value="title" @input="childChange">
    11.     </template>
    12.     <script>
    13.         var myCom = {
    14.             template: "#com",
    15.             props: ['title'],
    16.             emits: ["update:title"],
    17.             setup(props, { emit }) {
    18.                 function childChange(e){
    19.                     emit("update:title", e.target.value)
    20.                 }
    21.                 return{
    22.                     childChange
    23.                 }
    24.             }
    25.         }
    26.         var vm = {
    27.             components:{
    28.                 myCom
    29.             },
    30.             setup() {
    31.                 var msg = Vue.ref("")
    32.                 return {
    33.                     msg
    34.                 }
    35.             }
    36.         }
    37.         Vue.createApp(vm).mount('#myApp')
    38.     </script>
    39. </body>