Vue组件
什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。
组件化和模块化的不同：
模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用
组件定义的四种方式
// 方式1 使用 Vue.extend 配合 Vue.component 方法 // let login= Vue.extend({ // template:'<h1>登录</h1>' // }) // 方式二直接使用 Vue.component 方法： // Vue.component("login",{ // template:'<h2>登录</h2>' // }) // 方式三 将模板字符串，定义到script标签中,需要添加id 和改变type类型为 x-template： <!-- <script id="login" type="x-template"> <div> <h3>注册</h3> </div> </script> --> // Vue.component("login",{ // template:"#login" // }) 方式四 将模板字符串，定义到template标签中,只需要添加id <template id="mine"> <div> <h1>个人中心</h1> </div> </template> Vue.component("login",{ template:"#mine", })
组件中展示数据和响应事件
// 组件中data需要被定义为方法然后通过返回值来拿到对象 // 因为需要数据隔离 // 组件可以多次调用，多次调用的组件， // 其中一个更改数据不会影响到别的组件，因为Vue中数据驱动试图全局组件
Vue.component("app",{
template:"#app",
data(){
return{}
},methods:{
}
})
局部组件
const vm = new Vue({ el: '#app', data: { flag:true }, methods: { }, components:{ mine:{ template:"#mine", data(){ return{} }, methods:{} } } }) 组件的生命周期 和Vue实例一样有八个 beforeCreat() created() beforeMount() mounted() beforeUpdate() update() beforDestory() destoryed() 组件传值 父传子 父组件直接穿就可以，子组件需要用props来接受 <body> <div id='app'>
<father></father> </div> <template id="father"> <div> 父 <son :props1="msg1" :props2="msg2"></son> </div> </template> <template id="son"> <div> 子{{props1}}{{props2}} </div> </template> <script> Vue.component("father",{ template:"#father", data(){ return{ msg1:123, msg2:"haha" } }, }) Vue.component("son",{ template:"#son", data(){ return{} }, props: { props1:[String,Number], props2:[String,Number] } }) const vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> 子传父： 子组件调用父组件的方法 1. 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） 2. 子组件可以触发这个事件$emit('事件名字') 子组件给父组件传递数据 1. $emit方法第二个参数可以定义子组件给父组件传递的内容 2. 在父组件中怎么拿到这内容 2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到 2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。 <body> <div id='app'> <father></father> </div> <template id="father"> <div> 父组件 值：{{data}} <son @toson="fromson"></son> </div> </template> <template id="son"> <div> 子组件 <button @click="toson">传值</button> </div> </template> <script> Vue.component("father",{ template:"#father", data(){ return{ data:"" } }, methods:{ fromson(msg){ this.data = msg console.log(msg); } }
}) Vue.component("son",{ template:"#son", data(){ return{} }, methods:{ toson(){ this.$emit('toson', "子组件数据"); } } })
const vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> 插槽
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
<body> <div id='app'> <login>哈哈</login> </div> <template id="login"> <div> <h2><slot></slot></h2> 登录 </div> </template> <script> Vue.component("login",{ template:"#login", data(){ return{} } }) const vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> </body> 具名插槽 <body> <div id='app'> <login> <template v-slot:footer> <div>底部</div> </template> <template v-slot:header> <div>头部</div> </template> </login></div>
<template id="login"> <div> <h2><slot name="header"></slot></h2> 登录 <h1><slot name="footer"></slot></h1> </div> </template> <script> Vue.component("login",{ template:"#login", }) const vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> </body>