Vue基础-组件的复用

最新推荐文章于 2024-05-22 11:28:47 发布

李三刀iii

最新推荐文章于 2024-05-22 11:28:47 发布

阅读量577

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_72492001/article/details/126292098

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue的js文件-->
    <script src="js/vue-2.6.10.js"></script>
    <!--引入axios的js文件-->
    <script src="js/axios.min.js"></script>
</head>
<body>
      <div id="root">
          <counter></counter>
          <counter></counter>
          <counter></counter>
      </div>
</body>
</html>
<script>
    // 第一步：定义子组件
    let counter = Vue.extend({
        template: `
        <div>
            <button @click="num++">你点击了{{num}}次;记录下来了</button>
        </div>
            `,
        // counter每一个组件的计算值是相互独立了不受其他组件的影响
        // 是因为跟标签里面的counter使用了三次组件，使用了三次数据的模型，每一次都需要返回值
        // 说以需要用的是一个函数，函数具体的写法是data(){ return},调用函数必须有返回值
        data(){
            return{num:0}
        }
        // 2.注册组件（此处是全局注册）
        // Vue.component("counter",counter);
    });
    // 3 使用组件
    // 父组件，在父组件中创建局部注册，子父进行绑定
    new Vue({
        el:"#root",
        data:{
        },
        // 局部注册
        components:{
            counter
        }
    });
</script>