day87-Vue基础-组件注册、组件通信、组件混入、组件插槽
原创day87-Vue基础-组件注册、组件通信、组件混入、组件插槽
原创
少年包青菜
修改于 2019-12-18 11:28:29
修改于 2019-12-18 11:28:29
01.Vue组件系统之全局组件的注册
<body>
<div id="app"></div>
</body>
<script>
// Vue注册组件，固定使用格式
Vue.component("global-component",{
template: `<div>
<h3>{{ leon }}</h3>
<\div>`,
data(){
return {
leon: 'Hello Leon'
}
}
},
);
// 找到元素并渲染进去
new Vue({
el: '#app',
template: `<global-component></global-component>` // 使用模板
})
</script>02.Vue组件系统之组件的复用
<body>
<div id="app">
<global-component></global-component>
<global-component></global-component>
<global-component></global-component>
</div>
</body>
<script>
Vue.component('global-component', {
template: `<div>
<h1>{{ content }}</h1>
</div>`,
data(){
return{
content: 'Hello Vue!'
}
}
});
new Vue({
el: '#app',
})
</script>03.Vue组件系统之局部组件
<style>
.header {
width: 100%;
height: 50px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
<script>
// 写一个局部组件
let Header = {
template: `<div class="header">
<h1>{{ greeting }}</h1>
</div>
`,
data() {
return {
greeting: '这是局部组件'
}
}
};
new Vue({
el: '#app',
// 模板固定使用格式
template: `<app-header></app-header>`,
components: {
// 将局部组件注册进来
'app-header': Header
}
})
</script>04.无
05.Vue组件系统之父子组件的通信
<body>
<div id="app"></div>
</body>
<script>
//定义一个局部组件
let Header = {
template: `
<div>
<h2>{{ greeting }}</h2>
<h2>{{ fData }}</h2>
</div>
`,
props: ['fData'], // step2: 固定格式，从父组件那里得到数据
data() {
return {
greeting: '应用数据示例'
}
}
};
//定义父亲组件
let App = {
// step1: 给子组件绑定一个FData的属性
template: `
<div>
<app-header v-bind:fData="fatherData"></app-header>
</div>
`,
//在父组件里面注册局部组件
components: {
'app-header': Header // 'app-header'名字自定义，将 Header 注册进去即可
},
data(){
// 定义fatherData
return {
fatherData: 0
}
}
};
//全局注册
new Vue({
el: '#app',
template: `<App></App>`,
components: {
App //将父组件注册进去
}
})
</script>06.Vue组件系统子父组件的通信
<body>
<div id="app"></div>
</body>
<script>
// 子组件
let Header = {
template: `
<div>
<button @click="sonClick">点击我改变字体大小</button>
</div>
`,
methods: {
sonClick: function () {
this.$emit('change-size', 0.1) // step1: $emit 固定使用格式
}
}
};
// 父组件
let App = {
// step2: v-on 使事件处于被监控状态
template: `
<div>
<span :style="{ fontSize: postFontSize + 'em' }">我是你 爸爸</span>
<my-header v-on:change-size="fatherClick"></my-header>
</div>
`,
// 注册子组件进父组件
components: {
'my-header': Header
},
data(){
return{
postFontSize: 1 // 默认此时的 字体大小是 1
}
},
methods: {
fatherClick: function (value) { // step3: value 自动从子组件那里接受
this.postFontSize += value
}
}
};
new Vue({
el: '#app',
template: `<App></App>`,
components: {
App
}
})
</script>07.Vue组件系统之混入
<div id="app">
<my-leon></my-leon>
<my-bob></my-bob>
</div>
</body>
<script>
let mixs = { // 组件里面放置 methods，用来给下面替换
methods: {
show: function (name) {
console.log(name + '来了')
},
hide: function (name) {
console.log(name + '走了')
}
}
};
let Leon = {
template: `
<div>
<button @click="show('Leon')">点击显示Leon来了</button>
<button @click="hide('Leon')">点击显示Leon走了</button>
</div>
`,
mixins: [mixs] // 替换原来的 methods
};
let Bob = {
template: `
<div>
<div>
<button @mouseenter="show('Bob')">鼠标移入显示Bob来了</button>
<button @mouseleave="hide('Bob')">鼠标移出显示Bob走了</button>
</div>
</div>
`,
mixins: [mixs] // 替换原来的 methods
};
new Vue({
el: '#app',
components: {
'my-leon': Leon,
'my-bob': Bob
}
})
</script>08.Vue组件系统之插槽
<body>
<div id="app">
<global-component>Python</global-component>
<global-component>Java</global-component>
<global-component>C#</global-component>
</div>
</body>
<script>
Vue.component('global-component', {
// <slot></slot>标签，可以用来作其它的填充替换
template: `
<div><slot></slot></div>
`
});
new Vue({
el: '#app',
})
</script>09.Vue组件系统之具名插槽
<style>
body {
margin: 0;
}
.box {
width: 50px;
height: 50px;
background-color: cornflowerblue;
float: left;
margin-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<global-component>
<div slot="home">首页</div>
<div slot="lightcourses">轻课</div>
<div slot="degreecourses">学位课程</div>
</global-component>
</div>
<script>
Vue.component("global-component", {
template: `
<div class="box">
<slot name="lightcourses"></slot>
<slot name="degreecourses"></slot>
<slot name="home"></slot>
</div>
`
});
new Vue({
el: "#app",
})
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录