Vue之全局组件
全局组件可以被任何局部组件调用
<div id="app">
<!--这里是组件的使用-->
<global-component></global-component>
</div>
<script>
// 注意这里是component不是components
Vue.component('global-component',{
template:`
<div>
<h2>{{wanrong}}</h2> // 这里的变量可以获取data中返回的值
<h3>{{wanrong}}</h3>
</div>
`,
data(){
return {
wanrong:'Hello wanrong!',
}
}
});
new Vue({
el:'#app',
// 这里是组件的使用
template: `<global-component></global-component>`
})
</script>
Vue之局部组件
<div id="app">
</div>
<script>
// 第一步创建一个object对象
let Header = {
template: `
<div>
<h1>{{greeting}}</h1>
</div>
`,
data() {
return {greeting: 'Hello World'} // 这是一个单体函数用来给greeting传递值
}
};
let App = {
// 使用子组件
template: `
<app-header></app-header>
`,
// 在父组件中注册子组件
components:{
'app-header': Header,
}
};
new Vue({
el:'#app',
// 使用父组件
template:'<app></app>',
// 注册父组件
components: {
App,
}
})
</script>
Vue之父子组件的通信
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<h1>{{ greeting }}</h1>
<h2>{{ fatherData }}</h2>
</div>
`,
// 获取父亲组件传递过来的值（获取的是count的值）
props: ['fatherData'],
data() {
return {
greeting: 'Hello Vue', // 给greeting传递一个值
}
},
};
let App = {
template: `
<div>
<app-header :fatherData="count"></app-header>
</div>
`,
components: {
'app-header': Header,
},
data() {
return {
count: 100, // 给count传值
}
}
};
new Vue({
el: '#app',
template: `<App></App>`,
components: {
App,
}
})
</script>
Vue之子父组件的通信
<div id="app">
</div>
<script>
let Header = {
template: `
<div>
<button v-on:click="sonClick">点击给父组件传递数据</button> // 点击button按钮会触发sonClick这个方法
</div>
`,
methods: {
sonClick: function () {
this.$emit('click',0.1); // 会自动的触发下面的click方法，并且会给fatherClick函数传递一个0.1这个值
}
},
};
let App = {
template: `
<div>
<span v-bind:style="{ fontSize: postFontSize + 'em' }">father</span> // em可以理解为代表单位，例如：px等等
<app-header v-on:click="fatherClick"></app-header> // 上面的$emit会自动的获取click事件，并执行click事件所代表的的fatherClick函数，
这里不一定是一个函数也可以是一个表达式。
</div>
`,
components: {
'app-header': Header, // 注册app-header
},
data() {
return {
postFontSize: 1,
}
},
methods: {
fatherClick: function (value) {
this.postFontSize += value; // 会获取到上面传递的值0.1，并修改后传递给postFontSize这个值
}
}
};
new Vue({
el: '#app',
template: `<App></App>`,
components: {
App,
}
})
</script>
Vue组建系统之混入
<div id="app">
<my-gxx></my-gxx>
<my-zq></my-zq>
</div>
<script>
let mixs = { // 提高代码的复用性
methods: {
show: function (name) {
alert(name + '来了')
},
hide: function (name) {
alert(name + '走了')
},
},
};
let mygxx = {
template: `
<div>
<button v-on:click="show('gxx')">点击显示gxx来了</button> // 绑定click事件，执行show函数
<button v-on:click="hide('gxx')">点击显示gxx走了</button> // 绑定click事件，执行hide函数
</div>
`,
mixins: [mixs], // 这样操作以后就不需要在进行重复的注册和使用组件了
};
let myzq = {
template: `
<div>
<button v-on:mouseenter="show('zq')">点击显示zq来了</button>
<button v-on:mouseleave="hide('zq')">点击显示zq走了</button>
</div>
`,
mixins: [mixs],
};
new Vue({
el: '#app',
components: {
'my-gxx': mygxx,
'my-zq': myzq,
}
})
Vue组建系统之插槽
<div id="app">
<global-component>首页</global-component>
<global-component>免费课程</global-component>
<global-component>轻课</global-component>
<global-component>wjs</global-component>
<global-component>gxx</global-component>
</div>
<script>
Vue.component('global-component',{
template: `
<div class="box"><slot></slot></div> // slot就是插槽的写法
`,
},
);
new Vue({
el: "#app",
})
</script>
Vue组建系统之具名插槽
<div id="app">
<global-component>
<div slot="home">首页</div>
<div slot="freecourse">免费课程</div>
<div slot="wjs">wjs</div>
<div slot="gxx">gxx</div>
</global-component>
</div>
<script>
Vue.component('global-component', {
template: `
<div class="box">
<slot name="freecourse"></slot>
<slot name="gxx"></slot>
<slot name="wjs"></slot>
<slot name="home"></slot>
</div>
`,
},
);
new Vue({
el: "#app",
})
</script>