Vue-组件化_vue将页面定义成组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41907450/article/details/123164667

本文为Vue组件化的学习笔记，详细介绍了如何定义Vue组件，包括全局组件的四种定义方式：vue.extend、直接创建、外部定义template和字典方式。同时，文章探讨了组件化与模块化的区别，并阐述了组件数据传递的两种方式：父组件向子组件传值和通过事件调用传方法。最后，提到了一种新的模板传递方式——component。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue-组件化

一、定义vue组件
二、全局组件定义的四种方式
三、定义私有的组件
四、组件中的data 传值
- 1、父组件向子组件传值，data
- 2、父组件通过事件调用向子组件传方法
五、一个新的传template的方式：component

以下均为自用学习笔记

一、定义vue组件

什么是组件，组件的出现是为了拆分vue实例的代码量的，能够让我们以不同的组件来划分不同的功能模块，将来我们需要什么样的功能就可以去调用什么样的组件即可。
组件化和模块化的不同：
模块化：从代码逻辑的角度进行划分；方便代码分层开发，保证功能模块职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

二、全局组件定义的四种方式

1、使用vue.extend 来创建全局的vue组件

    // 1.1 使用vue.extend 来创建全局的Vue组件
    var com1 = Vue.extend({
      template:'<h3>这是使用Vue.extend 创建的组件</h3>' 
      //  通过template 属性指定了组件要展示的HTML结构

    })
    // 1.2 使用Vue.component(‘组件的名称’，创建出来的组件模板对象)
    // Vue.component('mycom1',com1)
    // 如果使用Vue.component 定义全局组件的时候，组件名称使用了驼峰命名，则在引用组件的时候，
    // 需要把大写驼峰改为小写的字母，同时两个单词直接要用 ‘-’ 链接；
    // 如果不使用驼峰，则直接拿名称来使用即可；
    Vue.component('mycom1',com1)

      // vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引人它的，
      // 第二个参数，Vue.extend 创建的组件，其中template就是组件将来要展示的内容；
      Vue.component('mucom1',Vue.extend({
        template:'<h3> 这是使用Vue.extend 创建的组件 </h3>'
      }))

2、直接创建

<body>

<div id="app">
  <com1></com1>
</div>

<script>
  Vue.component('com1',{
  // 注意不论是哪种方式创建的组件，组件的template属性指向的模板内容，必须有且只能有唯一的一个根元素
    template:'<div><h3> 这是一个h3的标签 </h3></div>'
  })
  var vm = new Vue({
    el:'#app',
    data:{},
    mathods:{}
  })

</script>
</body>

3、在外部定义template 结构

<body>

<template id="tmp1">
  <div >
  <h1>这是一个temp元素，在外边定义的组件结构，这个方式有代码只能提示高亮</h1>
  <h4>好的不错</h4>
</div>
</template>

<div id="app">
  <com3></com3>
</div>

<script>
  Vue.component('com3',{
    template:'#tmp1'
  })
  var vm = new Vue({
    el:'#app',
    data:{},
    mathods:{}
  })

</script>

</body>

4、使用字典的方式定义组件

<script>
  // 通过 对象 字面量的形式， 定义了一个 组件模板对象
  var login = {
    template :'<h1>1234</h1>'
  }

  // 通过 Vue.component 把组件模板对象，注册为一个全局的Vue组件，同时为这个组件起了一个名称，
  // 可以让我们 通过 标签形式。直接在页面中直接引人组件
  vue.component('mylogin',login)


  // 创建vue实例
  var vm = new Vue({
    el:'#app',
    data:{},
    mathods:{},
  })

</script>

三、定义私有的组件

<body>

<template id="tmp1">
  <div >
  <h1>这是一个temp元素，在外边定义的组件结构，这个方式有代码只能提示高亮</h1>
  <h4>好的不错</h4>
</div>
</template>

<div id="app">
  <com3></com3>
  <login></login>
</div>

<script>
  Vue.component('com3',{
    template:'#tmp1'
  })
  var vm = new Vue({
    el:'#app',
    data:{},
    mathods:{},
    components:{
      login:{
        template:'<h3>这是一个私有的 login，template元素</h3>'
      }
    }
  })

</script>

</body>

四、组件中的data 传值

  // 组件可以有自己的data数据
  // 组件的data和实例的data有点不一样，组件中的data可以是一个对象，但是实例中的data必须是一个方法
  // 组件中的data除了必须为一个方法外，方法内部还必须返回一个对象
  // 组件中的data数据和实例中的data使用方式完全一样
  Vue.component('com3',{
    template:'<h4>{{msg}}</h4>',
    data:function(){
      return {
        msg:'组件中定义的数据 '
      }
    }
  })

1、父组件向子组件传值，data

注意：子组件默认无法访问到父组件的data 上的数据，和methods 中的方法

<body>


<div id="app">
  <!-- 父组件，可以在引用子组件的时候，通过 属性绑定 （v-bind:） 的形式，把需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用  -->
  <com1 v-bind:parentmsg="msg"></com1>
</div>

<script>

  // 创建vue实例
  var vm = new Vue({
    el:'#app',
    data:{
      msg :"父组件的数据msg"
    },
    mathods:{},
    components:{
      com1:{
        template :'<h1>这是子组件 -- {{ parentmsg }}</h1>',
        // props 的数据都是只读的
        props:['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在props 数组中定义一下，这样才能使用
        // 子组件的data 数据，并不是通过父组件传递过来的，而是子组件资深私有的，比如ajax 请求返回的数据，都可以放在data上；
        // data 上的数据都是可读可写的
        data(){
          return {
            title:'子组件title'
          }
        },
      },
    }
  })

</script>

</body>

2、父组件通过事件调用向子组件传方法

<body>


<div id="app">
  <!-- com2  通过 事件修饰符， 通过func绑定show的方法，这样子组件就能调用父组件的方法 -->
  <com2 @func="show"></com2>
</div>

<template id="temp2">
  <div>
    <h1>这是子组件</h1>
  </div>
</template>

<script>
  var com2 = {
    template :'#temp2'
  }

  // 创建vue实例
  var vm = new Vue({
    el:'#app',
    data:{
      msg :"父组件的数据msg"
    },
    mathods:{
      show(){
        console.log('父组件方法')
      }
    },
    components:{
      com2
      },
    
  })

</script>

</body>

五、一个新的传template的方式：component


<body>


<div id="app">
  <!-- com2  通过 事件修饰符， 通过func绑定show的方法，这样子组件就能调用父组件的方法 -->
  <com2 @func="show"></com2>
</div>

<template id="temp2">
  <div>
    <h1>这是子组件</h1>
    <input type="button" value="子组件的按钮" @click="myclick">
  </div>
</template>

<script>
  var com2 = {
    template :'#temp2',
    methods:{
      myclick(){
        // 触发父组件传递过来的func方法
        // emit 英文原意 为 ：触发，调用的意思
        this.$emit('func')
      }
    }
  }

  // 创建vue实例
  var vm = new Vue({
    el:'#app',
    data:{
      msg :"父组件的数据msg"
    },
    methods:{
      show(){
        console.log('父组件方法')
      }
    },
    components:{
      com2
      },
    
  })

</script>

</body>