102 lines
2.2 KiB
HTML
102 lines
2.2 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">
|
||
<v-header @change="getData" :title=" '2' "></v-header>
|
||
测试文字
|
||
<aaaa></aaaa>
|
||
</div>
|
||
</body>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
||
<script>
|
||
// 组件？？？？
|
||
// 以html为核心的代码封装
|
||
|
||
|
||
// 局部组件
|
||
//
|
||
var aaaa = {
|
||
template: `
|
||
<div>
|
||
<v-header></v-header>
|
||
<h3>{{ title }}</h3>
|
||
</div>
|
||
`,
|
||
data() {
|
||
return {
|
||
title: '公共底部'
|
||
}
|
||
},
|
||
created() {}
|
||
}
|
||
|
||
|
||
|
||
// 全局组件
|
||
// 组件名：组件名其实就是html的标签名称，不可以用默认标签的名字
|
||
Vue.component('v-header',{
|
||
template: `
|
||
<div>
|
||
|
||
<h2 @click="submit">{{ title }}</h2>
|
||
</div>
|
||
`,
|
||
// props: ['title'],
|
||
props: {
|
||
title: {
|
||
default: "这是默认标题",
|
||
type: String
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
list: "这是子组件的数据"
|
||
}
|
||
},
|
||
created() {
|
||
console.log("公共的头部 的生命周期：", this);
|
||
console.log(this.$parent.$data.text);
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$emit("change", this.list)
|
||
}
|
||
},
|
||
components: {
|
||
aaaa
|
||
}
|
||
})
|
||
|
||
|
||
// 父组件 ---> 子组件 传数据
|
||
// props
|
||
|
||
// 子组件 ---> 父组件
|
||
// $emit 借助事件，把数据抛出去
|
||
|
||
var vm = new Vue({
|
||
el: '.app',
|
||
data: {
|
||
text: 'jvbjkhbjhbjhbjhb'
|
||
},
|
||
mounted() {
|
||
console.log(this.$children[1]);
|
||
},
|
||
methods: {
|
||
getData(val) {
|
||
console.log("父组件收到的数据：", val);
|
||
}
|
||
},
|
||
components: {
|
||
// "f": footer
|
||
aaaa
|
||
}
|
||
})
|
||
</script>
|
||
</html> |