Vue组件例子

芋圆社区 > 编程 > Vue > Vue组件例子

1017

2021-06-20

2022-05-17

Hey、小怪兽

• 这是官方文档的例子
• 该组件名就是app.component的第一个参数，也就是'my-component-name'
• 组件名命名的时候，遵循W3C的规范自定义组件名：也就是字母全小写且必须包含一个连字符，可以避免与当前以及未来的HTML元素发生冲突

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

• 下面是我的例子，点击button会修改Mark为Joe

<body>
    <div id="vue-app">
        <greeting></greeting>
    </div>
    <script src="app.js"></script>
</body>

Vue.component("greeting", {
    template: `
    <p>{{ name }}你好
        <button @click="changeName">修改姓名</button>
    </p>
    `,
    data: function () {
        return {
            name: "Mark"
        }
    },
    methods: {
        changeName: function () {
            this.name = "Joe";
        }
    }
})

var one = new Vue({
    el: "#vue-app",
})

上一篇：Vue中v-for的例子

下一篇：Vue的双向绑定例子

Vue组件例子

回复