console 命令行工具 X clear

console

const MyInput = {
    name: "ItemComponent",
    props: ['modelValue'],
    setup: function(props, context){
        const handleInput = (e) => {
            context.emit('update:modelValue', e.target.value)
        }
        return {
            handleInput
        }
    },
    template: "#myInput"
};

const ListComponent = {
    setup: function (props, context) {
        const value = Vue.ref('');

        return {
            value
        };

    },
    components: {
        "my-input": MyInput
    },
    template: "#listComponent"
};

const app = Vue.createApp(ListComponent);
app.mount("#app");

<html>
    <head>
        <title>VUE3.0</title>
    </head>
    <body>
        <div id="app"></div>
    </body>

    <script src="https://unpkg.com/vue@next"></script>
    <script type="text/html" id="listComponent">
        <my-input v-model="value" />
        {{ value }}
    </script>
    <script type="text/html" id="myInput">
        <input :value="modelValue" @input="handleInput">
    </script>
</html>