console 命令行工具 X clear

console

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

const App = {
    setup: function (props, context) {
        const hry = Vue.ref('');
        const roy = Vue.ref('');

        return {
            hry,
            roy
        };

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

const app = Vue.createApp(App);












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="useComponents">
        <my-input v-model:hry="hry" v-model:roy="roy"></my-input>
    </script>
    <script type="text/html" id="myInput">
        <input :value="hry" @input="e => handleInput(e, 'hry')">
        {{ hry }}
        <input :value="roy" @input="e => handleInput(e, 'roy')">
        {{ roy }}
    </script>
</html>