Vue组件使用

Posted 2021-12-07 ProChick

组件使用

• • • 1.什么是组件？
    • 2.基本使用
    • 3.父子组件传递数据
    • 4.根元素组件
    • 5.插槽的使用
    • 6.自定义事件
    • 7.mixins的使用
    • 8.render的使用

1.什么是组件？

组件是构成页面中独立结构单元，组件主要以页面结构形式存在，是对结构的抽象

• 能够减少重复代码的编写，提高开发效率。
• 降低代码之间的耦合程度，使项目更易维护和管理。
• 根据业务逻辑实现复杂的项目功能。

2.基本使用

<div id="my">
	<mybutton></mybutton> 
	<template id="mytemplate">
  		<button v-on:click="count++">点击{{count}}</button>
	</template>
</div>

#定义组件
Vue.component('mybutton', {
    data: function () {
        return {
        	count: 0
        }
	},
    #直接定义模板
	template: '<button v-on:click="count++">点击{{count}}</button>'
    #获取模板
    template: '#mytemplate'
})

#创建实例
var vm=new Vue({
    el:"#my",
    data:{
    	count:0
    }
})

3.父子组件传递数据

<div id="my">
	<mybutton v-bind:msg="message"></mybutton> 
</div>
----------------------------------------
Vue.component('mybutton', {
    data: function () {
        return {
       		count: 0
        }
    },
    props:['msg'],
    template: '<button v-on:click="count++">{{count}}--{{msg}}</button>'
})
var vm = new Vue({
    el:"#my",
    data:{
        count:0,
        message:'消息'
    }
})

4.根元素组件

<div id="D">
    <blog-post v-for="user in users" v-bind:user="users" v-bind:key="users.name">
    </blog-post>
</div>
---------------------
Vue.component('blog-post', {
    props:['user'],
    template: '<div class="blog-post">\\
                    <span>{{ user.name }}</span>\\
                    <span>{{ user.age }}</span>\\
                    <span>{{ user.sex }}</span>\\
               </div>'
})
var vm=new Vue({
    el:"#D",
    data:{
        users:[
            {name:'张三1',age:20,sex:'男'},
            {name:'张三2',age:20,sex:'男'},
            {name:'张三3',age:20,sex:'男'},
        ]
    }
})

5.插槽的使用

<my-slot id="D">
	张三
</my-slot>
----------------------
Vue.component('my-slot', {
    props:[''],
    template: '<div class="demo-alert-box">\\
                    <strong>Error!</strong>\\
                    <slot></slot>\\
               </div>'
})
var vm=new Vue({
    el:"#D",
    data:{
    }
})

6.自定义事件

<my-table id="table">
    <table-title></table-title>
    <table-data v-for="(user,index) in users" v-bind:user="user" v-bind:index="index"
            v-bind:key="user.id" v-on:remove="removeUser(index)"
            v-on:see="seeUser(index)"></table-data>
</my-table>
---------------------------------------------------
Vue.component('my-table', {
    template: '<table border="1px" width="80%" align="center">\\
                    <slot></slot>\\
                    <slot name="slot1"></slot>\\
               </table>'
})
Vue.component('table-title',{
    template:'<tr>\\
                    <td>ID</td>\\
                    <td>姓名</td>\\
                    <td>年龄</td>\\
                    <td>性别</td>\\
                    <td>操作</td>\\
              </tr>'
})
Vue.component('table-data',{
    props:['user','index'],
    template:'<tr>\\
    				<td>{{user.id}}</td>\\
                    <td>{{user.name}}</td>\\
                    <td>{{user.age}}</td>\\
                    <td>{{user.sex}}</td>\\
                    <td>\\
                    	<button v-on:click="remove">删除</button>\\
                    	<button v-on:click="see">查看</button>\\
                    </td>\\
              </tr>',
    methods:{
        remove:function(index){
        	this.$emit('remove',index);
        },
        see:function(index){
        	this.$emit('see',index);
        }
    }
})

var vm=new Vue({
    el:"#table",
    data:{
        users:[
            {id:1,name:'张三1',age:20,sex:'男'},
            {id:2,name:'张三2',age:22,sex:'女'},
            {id:3,name:'张三3',age:23,sex:'男'},
        ]
    },
    methods:{
        removeUser:function(index){
        	this.users.splice(index,1);//删除元素
        },
        seeUser:function(index){
        	alert(this.users[index].name+"-"+this.users[index].age+"-							"+this.users[index].sex);
        }
    }
})

7.mixins的使用

• mixins是一种分发Vue组件中可复用功能的方式

• mixins对象可以包含任何组件以及实例的选项，这些选项将会被合并到最终的选项中

• mixins使用的是和 Vue.extend() 一样的选项合并逻辑

也就是说，如果你的混入mixins包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用

• 对于钩子函数

  var mixin = {
    data(){
        return {msg:'1'}
    }
  }
  var vm = new Vue({
    	mixins: [mixin],
      data:{
          msg:'2'
      }
      created(){
      	console.log(this.$data.msg)
  	}
  })
  // => 2
  

• 对于数据获取

  var mixin = {
    created: function () { console.log(1) }
  }
  var vm = new Vue({
    created: function () { console.log(2) },
    mixins: [mixin]
  })
  // => 1
  // => 2
  

8.render的使用

• render作为渲染函数，它比模板更接近编译器，实现对虚拟DOM的操作
• 字符串模板template的代替方案，允许你发挥 JavaScript 最大的编程能力

<div id="app">
	<mydiv>跳转到百度页面</mydiv> 
</div>
----------------------------------------
Vue.component('mydiv', {
    render(createElement){
        return createElement('a',
            {
            	href:'www.baidu.com'
            },
            this.$slots.default
        )
    }
})
var vm=new Vue({
    el:"#app"
})

对于createElement函数

• 返回的对象并不是一个实际的DOM对象，而是一个描述节点（也称虚拟节点VNode），最终会被Vue进行渲染
• 第一个参数可以是html标签和组件选项对象
• 第二个参数可选，一般定义标签的属性
• 第三个参数是子级虚拟节点，可以是字符串文本也可以是插槽对象

<div id="app">
    <mydiv>
        <template v-slot:header>
            导航栏
        </template>
        <template v-slot:content>
            内容
        </template>
        <template v-slot:footer>
            底部栏
        </template>
    </mydiv> 
</div>
----------------------------------------
<script type="text/javascript">
    Vue.config.productionTip = false

    Vue.component('mydiv', {
        render(createElement){
            return createElement('div',
                [
                    createElement('header',this.$slots.header),
                    createElement('content',this.$slots.content),
                    createElement('footer',this.$slots.footer)
            	]
           )
        }
    })
    var vm=new Vue({
        el:"#app"
    })
</script>