首页 > 其他分享 >万象更新 Html5 - vue.js: vue 组件 1

万象更新 Html5 - vue.js: vue 组件 1

时间:2024-09-24 11:15:44浏览次数:7  
标签:vue name age 万象更新 webabcd Html5 template 组件

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - vue.js: vue 组件 1

示例如下:

vue\component\sample1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 组件 1</title>
    <script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>

<div id="root">
    <!--
        webabcd-button 是自定义组件(自定义组件的名称建议全部小写,或使用 kebab-case 命名方式)
    -->
    <webabcd-button prop1="v1" prop2="v2" @my-event="hi($event)" v-model="myData" :name="item.name" :age="item.age" v-for="item in myArray">click me</webabcd-button>
</div>

<script>

    // 常用的命名方法有 PascalCase, camelCase, kebab-case
    // HTML attribute 是不区分大小写的,你的 props 和 emits 中的参数的 camelCase 命名方式将会被自动转换为 kebab-case 命名方式后映射到 HTML attribute 上

    // 定义一个自定义组件
    const component = {
        data() {
            return {
                prop3: "v3"
            }
        },
        methods: {
            hello(name) {
                alert("hello: " + name);
            }
        },
        props: ['prop1', 'prop2', 'name', 'age', 'modelValue'],
        emits: ['myEvent', 'update:modelValue'],
        // 自定义组件的 template
        // 1、如果你需要在组件的 template 中使用组件元素上定义的 attribute 的话,则需要在 props 中定义 attribute 的名字
        // 2、如果你需要在组件的 template 中使用组件元素的内容,比如要使用 <webabcd-button>我是元素的内容</webabcd-button> 的话,则通过 <slot></slot> 代替
        // 3、如果你需要在组件的 template 中抛出事件,并且组件元素可以监听此事件的话
        //    a) 在 template 中定义 @click="$emit('myEvent', 'wanglei')" 用于抛出事件,第 2 个参数是可选参数(注:也可以在组件的 methods 中通过 this.$emit() 抛出事件)
        //    b) 在 emits 中增加 myEvent'
        //    c) 在组件元素上通过 @my-event="xxx($event)" 监听事件,其中的 $event 就是调用 $emit() 时传递的第 2 个参数
        // 4、如果你需要在组件的 template 中使用组件元素中定义的 v-model 的话
        //    a) 在 template 中定义 :value="modelValue"
        //    b) 在 props 中增加 'modelValue'
        //    c) 在 emits 中增加 'update:modelValue'
        template: `
            prop1:{{ prop1 }}, prop2:{{ prop2 }}, prop3:{{ prop3 }}, name:{{ name }}, age:{{ age }}
            <br>
            <button @click="hello('webabcd')">
                <slot></slot>
            </button>
            <br>
            <button @click="$emit('myEvent', 'wanglei')">
                <slot></slot>
            </button>
            <br>
            <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
            <br>`
    };

    // 创建一个 vue 实例(需要指定根组件选项)
    const app = Vue.createApp({
        data() {
            return {
                myData: "abc",
                myArray: [
                    { name: 'aaa', age: 10 },
                    { name: 'bbb', age: 20 },
                    { name: 'ccc', age: 30 },
                ]
            }
        },
        methods: {
            hi(name) {
                alert("hi: " + name);
            }
        }
    });

    // 注册一个名为 webabcd-button 的自定义组件(这种方式注册的是全局组件)
    app.component('webabcd-button', component);

    // 挂载指定的 html 节点(此节点将被 vue 渲染),并返回根组件的实例
    app.mount("#root");

</script>
</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

标签:vue,name,age,万象更新,webabcd,Html5,template,组件
From: https://www.cnblogs.com/webabcd/p/18428764/html5_vue_component_sample1

相关文章