Vue入门（二）：创建子组件

MyFlowing

已于 2023-02-21 22:15:36 修改

阅读量368

点赞数

文章标签： vue.js javascript 前端

于 2023-02-21 22:06:44 首次发布

本文链接：https://blog.csdn.net/my_9810/article/details/129151269

版权

该文章演示了如何使用Vue.js构建一个简单的网页，包括在HTML中引入JS模块，定义一个名为`myButton`的自定义组件，以及在`App.js`中注册并使用这个组件。组件包含计数功能，点击按钮会更新数据显示。整个流程展示了Vue的组件化开发和数据响应式特性。

摘要由CSDN通过智能技术生成

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue!</title>
    <script type="module" src="./src/index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

2. 封装自定义的组件：myButton.js

//封装一个自定义的组件
export default {
    data(){
        return{
            count:0
        }
    },
    template: '<div>' +
        '<h2>子组件</h2>'+
        '<button @click="count++">点我一下</button><span>{{count}}</span></div>'

}

3. App.js：引用自定义的组件

**注意：如果自定义组件要写在html文件中，自定义标签名小写

//引入组件
import myButton from "./components/myButton";


//创建一个根组件
export default {
    data() {
        return {
            message: "Vueeee!",
            count:0     //响应式数据
        }
    },
    //在组件中注册子组件
    components:{
        components:{
         "my-button":myButton   //前面是自定义标签名，后面是组件名
    },
    template:
        '<h1>{{message}}</h1>' +
        '<my-button></my-button> '+
        '<my-button></my-button> '+
        '<my-button></my-button> '
}

4. index.js

//引入Vue
//这里引入的vue默认不支持通过template属性来设置模板
import {createApp} from "vue/dist/vue.esm-bundler";
import App from "./App"

//创建应用挂载到页面
//mount()的返回值是根组件的实例
const vm = createApp(App).mount("#app")