vue组件

最新推荐文章于 2025-04-16 09:40:05 发布

困在雨天

最新推荐文章于 2025-04-16 09:40:05 发布

阅读量252

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44106237/article/details/126997362

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

什么是组件：组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件定义的四种方式

1.使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({

2.直接使用 Vue.component 方法：

Vue.component('register', {

3.将模板字符串，定义到script标签中：

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {

4.将模板字符串，定义到template标签中：

< template id="tmpl">

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {

前三个基本不用，主要记住第四个

组件中展示数据和响应事件

在组件中，data需要被定义为一个方法，例如：

Vue.component('account', {

template: '#tmpl',
data() {
return {
msg: '大家好！'
}
},
methods:{
login(){
alert('点击了登录按钮');
}
}
});

使用components属性定义局部子组件

组件实例定义方式：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: { // 定义子组件
account: { // account 组件
template: '<div><h1>这是Account组件{{name}}</h1><login></login></div>', // 在这里使用定义的子组件
components: { // 定义子组件的子组件
login: { // login 组件
template: "<h3>这是登录组件</h3>"
}
}
}
}
});
</script>

引用组件：

在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data属性中的值，需要使用this来访问；

【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象

组件案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id='app'>
    <!-- 组件名 不能和html5标签重复 不能使用内置或保留的html5元素作为组件id -->
    <login></login>
    <!-- 无法使用他人的私有组件 -->
    <!-- <mytop></mytop> -->
  </div>
  <!-- 创建组件方法 -->
  <template id="login">
    <!-- 只能有一个根元素 -->
    <div>
      <h3>第一军团没有秘密</h3>
      <h3>西吉斯蒙德</h3>
    </div>
  </template>

  <!-- 以下为私有组件 -->
  <div id="app2">
    <login></login>
    <mytop></mytop>
  </div>
  <template id="myheader">
    <!-- 只能有一个根元素 -->
    <div>
      <h3>黄金王座</h3>
      <h3>西吉斯蒙德</h3>
    </div>
  </template>

  <script>
    Vue.component('login',{
      template:'#login'
    })
  const vm = new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    beforeCreate(){
    },
    created(){
    },
    beforeMount(){
    },
    mounted(){
    },
    beforeUpdate(){
    },
    updated(){
    },
  })
  // 私有租组件
   const vm2 = new Vue({
      el: '#app2',
      data: {
      },
      methods: {
      },
      components:{
        'mytop':{
          template:'#myheader'
        }
      },
      beforeCreate() {
      },
      created() {
      },
      beforeMount() {
      },
      mounted() {
      },
      beforeUpdate() {
      },
      updated() {
      },
    })
  </script>
</body>
</html>

组件动画案例

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .v-enter,
    .v-leave-to {
      transform: translateX(200px);
    }
  
    .v-enter-active,
    .v-leave-active {
      transition: all 1s;
    }
  
    .v-enter-to,
    .v-leave {
      transform: translateX(0px);
    }
  </style>
</head>

<body>
  <div id='app'>
    <logining></logining>
    <button @click="flag = !flag"> 切换</button>
    <!-- <transition mode="in-out"> -->
    <transition mode="out-in">
      <component :is="flag?'logining':'mine'"></component>
    </transition>
  </div>
  <div id='app2'>
    <logining></logining>
    <button @click="flag = !flag"> 切换</button>
    <!-- <transition mode="in-out"> -->
    <transition mode="out-in">
      <logining v-if="flag"></logining>
      <mine v-else></mine>
    </transition>
  </div>
  <template id="login">
    <div>
      太阳
      <button @click="add()">加</button>
      {{msg}}{{num}}
    </div>
  </template>
  <template id="mine">
    <div>
      书
      <button @click="add2()">加</button>
      {{msg}}{{num}}
    </div>
  </template>


  <script>
    // 定义组件
    Vue.component('logining', {
      template: '#login',
      data() {
        return {
          msg: '☀',
          num: '',
          msg2: '📕'
        }
      },
      methods: {
        add() {
          this.num += this.msg.repeat(10)
        },
        add2() {
          this.num += this.msg2
        }
      },
      beforeCreate() {
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeDestroy() {
        console.log('beforeDestroy');
      },
      destroyed() {
        console.log('destroyed');
      },
    })

    const vm = new Vue({
      el: '#app',
      data: {
        flag: true,
      },
      methods: {
      },
      components: {
        'mine': {
          template: '#mine',
          data() {
            return {
              msg: '☀',
              num: '',
              msg2: '📕'
            }
          },
          methods: {
            add() {
              this.num += this.msg
            },
            add2() {
              this.num += this.msg2
            }
          },
        }
      }
    })
     const vm2 = new Vue({
        el: '#app2',
        data: {
          flag: true,
        },
        methods: {
        },
        components: {
          'mine': {
            template: '#mine',
            data() {
              return {
                msg: '☀',
                num: '',
                msg2: '📕'
              }
            },
            methods: {
              add() {
                this.num += this.msg
              },
              add2() {
                this.num += this.msg2
              }
            },
          }
        }
      })
  </script>
</body>

</html>

组件显示数据和方法案例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id='app'>
    <logining></logining>
    <button @click="flag = !flag"> 切换</button>
    <component :is="flag?'logining':'mine'"></component>
  </div>
  <template id="login">
    <div>
      太阳
      <button @click="add()">加</button>
      {{msg}}{{num}}
    </div>
  </template>
  <template id="mine">
    <div>  
      书
      <button @click="add2()">加</button>
      {{msg}}{{num}}
    </div>
  </template>


  <script>
    // 定义组件
    Vue.component('logining',{
      template:'#login',
      data(){
        return{
          msg:'☀',
          num:'',
          msg2:'📕'
        }
      },
      methods:{
        add(){
          this.num+= this.msg
        },
        add2() {
          this.num += this.msg2
        }
      },
      beforeCreate(){
        console.log('beforeCreate');
      },
      created() {
        console.log('created');
      },
      beforeDestroy() {
        console.log('beforeDestroy');
      },
      destroyed() {
        console.log('destroyed');
      },
    })

  const vm = new Vue({
    el: '#app',
    data: {
      flag:true,
    },
    methods: {
    },
    components:{
      'mine':{
        template: '#mine',
        data() {
          return {
            msg: '☀',
            num: '',
            msg2: '📕'
          }
        },
        methods: {
          add() {
            this.num += this.msg
          },
          add2() {
            this.num += this.msg2
          }
        },
        beforeCreate() {
          console.log('beforeCreate');
        },
        created() {
          console.log('created');
        },
        beforeDestroy() {
          console.log('beforeDestroy');
        },
        destroyed() {
          console.log('destroyed');
        },
      }
    }
  })
  </script>
</body>
</html>