149 lines
3.4 KiB
HTML
149 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<lb-header :title="str"></lb-header>
|
||
|
||
<lb-button @more="alertOne"></lb-button>
|
||
<h2 ref="nihao">测试标签</h2>
|
||
|
||
|
||
<lb-button @more="alertTwo"></lb-button>
|
||
|
||
<lb-header title="详情页的头部">
|
||
|
||
<template v-slot:left>
|
||
<i>我是图标left</i>
|
||
</template>
|
||
|
||
<template v-slot:right>
|
||
<i>我是图标right</i>
|
||
</template>
|
||
|
||
</lb-header>
|
||
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script>
|
||
// 组件
|
||
// 生命周期
|
||
//
|
||
// 全局组件 在项目的任何一个页面都可以随意使用
|
||
// ref
|
||
// 局部组件 只有某个页面可以使用
|
||
// 1 定义局部组件
|
||
var button_a = {
|
||
template: `
|
||
<div>局部组件 </div>
|
||
`,
|
||
data() {
|
||
return {
|
||
}
|
||
},
|
||
methods: {},
|
||
}
|
||
|
||
Vue.component('lb-header', {
|
||
template: `
|
||
<div>
|
||
<div class="left">
|
||
<slot name="left"></slot>
|
||
</div>
|
||
<h2>{{ title }}</h2>
|
||
<div class="right">
|
||
<slot name="right"></slot>
|
||
</div>
|
||
</div>
|
||
`,
|
||
// props: [ 'title' ],
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: '默认标题'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
headerText: '我的公共头部'
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
})
|
||
|
||
|
||
Vue.component('lb-button', {
|
||
template: `
|
||
<button @click="but_click">
|
||
点我
|
||
<lb-c></lb-c>
|
||
</button>
|
||
`,
|
||
data() {
|
||
return {
|
||
aaa: '11111'
|
||
}
|
||
},
|
||
methods: {
|
||
but_click() {
|
||
// 2
|
||
console.log(this.$root.$children[3].$props.title="哈哈是受到很多很多很好的");
|
||
this.$emit("more", "1111")
|
||
}
|
||
},
|
||
// 2 注册局部组件
|
||
components: {
|
||
"lb-c":button_a
|
||
}
|
||
});
|
||
|
||
|
||
|
||
|
||
// 父子组件的数据传递
|
||
// 父 --> 子 props provide / inject
|
||
// 子 --> 父 $emit
|
||
// 传html 用插槽
|
||
// 别名插槽
|
||
// 作用域插槽 (搞不明白没关系)
|
||
// 兄弟关系
|
||
// 1: 子1 $emit 提交数据给父组件，然后父组件通过props传给子2
|
||
// 2: this.$parent $root 等实现
|
||
// 3: provide / inject
|
||
new Vue({
|
||
el: '.app',
|
||
data: {
|
||
str: '',
|
||
},
|
||
beforeCreate() {
|
||
console.log(this);
|
||
},
|
||
created() {
|
||
this.getIndex();
|
||
console.log(this.$refs.nihao);
|
||
},
|
||
methods: {
|
||
alertOne(res){
|
||
console.log(res);
|
||
this.str = res;
|
||
alert(1)
|
||
},
|
||
alertTwo(res){
|
||
console.log(res);
|
||
alert(2)
|
||
},
|
||
getIndex() {
|
||
console.log("getIndex");
|
||
}
|
||
}
|
||
})
|
||
</script>
|
||
</html> |