110 lines
2.7 KiB
HTML
110 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>组件</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div id="app">
|
||
|
||
<lb-children @father-enent="fatherClick" :wdfewefe="msg"></lb-children>
|
||
|
||
|
||
<div class="content">主体内容</div>
|
||
|
||
|
||
|
||
<lb-footer></lb-footer>
|
||
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// 父组件可以向子组件通过 props传递数据
|
||
// 但是 反过来 子组件 没有办法直接访问或者修改父组件里面的任何数据
|
||
// 子组件需要通过事件向父组件提交数据
|
||
|
||
// 1：局部注册组件
|
||
// 1 先定义
|
||
// 2: 在Vue里面挂载一下
|
||
|
||
|
||
var children = {
|
||
props: [ "wdfewefe" ],
|
||
template: `
|
||
<div class="footer">
|
||
<ul>
|
||
<li v-for="item in wdfewefe">
|
||
<img :src="item.url" alt="">
|
||
<p>{{ item.title }}</p>
|
||
</li>
|
||
</ul>
|
||
<button @click="submit()">点我</button>
|
||
</div>`,
|
||
data() {
|
||
return {
|
||
titlejubu: '局部注册组件'
|
||
}
|
||
},
|
||
methods: {
|
||
alerts() {
|
||
alert("局部注册")
|
||
},
|
||
submit() {
|
||
this.$emit("father-enent","我是子组件")
|
||
}
|
||
},
|
||
}
|
||
|
||
// // 2: 全局注册组件
|
||
// Vue.component("lb-footer",{
|
||
// data () {
|
||
// return {
|
||
// list: [
|
||
// { url: './img/book.png',title: '书架' },
|
||
// { url: './img/chat.png',title: '书城' },
|
||
// { url: './img/man.png',title: '' },
|
||
// { url: './img/music.png',title: '轻音乐' },
|
||
// { url: './img/user.png',title: '我的' }
|
||
// ]
|
||
// }
|
||
// },
|
||
// template: `<div class="footer">
|
||
// <ul>
|
||
// <li v-for="item in list">
|
||
// <img :src="item.url" alt="">
|
||
// <p>{{ item.title }}</p>
|
||
// </li>
|
||
// </ul>
|
||
// </div>`
|
||
// })
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
msg: [
|
||
{ url: './img/book.png',title: '书架' },
|
||
{ url: './img/chat.png',title: '书城' },
|
||
{ url: './img/man.png',title: '' },
|
||
{ url: './img/music.png',title: '轻音乐' },
|
||
{ url: './img/user.png',title: '我的' }
|
||
]
|
||
},
|
||
methods: {
|
||
fatherClick(res) {
|
||
console.log(res)
|
||
}
|
||
},
|
||
components : {
|
||
'lb-children': children
|
||
}
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html> |