Vue的组件
一.Vue的全局组件注册
Vue.component("组件名称",{})
<div id="app01"> <global-component></global-component> </div> <script src="./static/vue.min.js"></script> <script> Vue.component('global-component',{ template:`<div> <h3>{{ msg }}</h3> </div>`, data(){ return{ msg:'hello vue', } } }); new Vue({ el:'#app01', // template:'' })
二.局部组件注册
const app = new Vue({
el: "#app",
components: {
组件的名称: 组件的配置信息
}
})
let Header={ template:`<div id="d1"> <h1>{{ greeting }}</h1> </div>`, data(){ return {greeting:'hello world'} } }; let app={ template:`<div><app-header></app-header></div>`, components:{'app-header':Header} };
三.子组件的注册,及父子组件通讯
-- 在父组件中注册components
## 注意写组件标签
## 每个组件的template只识别一个作用域块
let son={ template:`<div><span>{{ fData }}</span></div>`, props:['fData'] }; let father={ template:`<div><my-son :fData="fatherdata"></my-son></div>`, data(){return{fatherdata:'alex'}}, components:{'my-son':son} }; new Vue({ el:'#app01', template:`<father></father>`, components:{father} })
四 子父组件通讯
let son={ template:`<div><button @click="sonclick">改变字体大小</button></div>`, methods:{ sonclick:function () { this.$emit('changesize',0.1) } } }; let father={ template:`<div> <span :style="{ fontSize:postFontSize + 'em' }">我是你爸爸</span> <my-son @changesize ="fatherclick"></my-son> </div>`, data(){return{postFontSize:1}}, components:{'my-son':son}, methods:{ fatherclick:function (value) { console.log(value); this.postFontSize += value; } } }
子组件通过$emit提交事件,父组件中的子组件绑定这个事件,监听这个事件用来触发自身的方法,会自动接收子组件的传值
五.非父子组件之间的通讯
声明中间调度器
-- 其中一个组件向中间调度器提交事件
-- 另一个组件监听中间调度器的事件
-- 注意this的问题
<script> let hanfei = new Vue(); let maweihua = { template: `<div> <h1>这是马伟华</h1> <button @click="my_click">点我向康抻说话</button> </div>`, methods: { my_click: function () { console.log("马") // 向康抻说话 // 向中间调度器提交事件 hanfei.$emit("maweihua_say", "晚上等我一起吃饭~~~") } } }; let kangchen = { template: `<div><h1>这是康抻</h1>{{say}}</div>`, data(){ return { say: "" } }, mounted(){ // 监听中间调度器中的方法 let that = this; hanfei.$on("maweihua_say", function (data) { console.log(data) that.say = data }) } }; const app = new Vue({ el: "#app", components: { maweihua: maweihua, kangchen: kangchen } }) </script>
六.插槽\命名插槽
Vue.component('global-component',{ template:`<div class="box"><slot></slot></div>`, });
Vue.component('global-name',{ template:` <div class="box"> <slot name="lightcourses"></slot> <slot name="degreecourses"></slot> <slot name="home"></slot> </div>` });
七.mix
let mixs = { methods:{ show:function (name) { console.log(name+'comming'); }, hide:function (name) { console.log(name+'goout') } } }; let alex={ template:'#t1', mixins:[mixs] }; let wusir={ template:'#t2', mixins:[mixs] };