111 lines
2.7 KiB
HTML
111 lines
2.7 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>component 组件</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app">
|
|
<h2>app 父组件</h2>
|
|
<lb-test></lb-test>
|
|
<item :list-data="newsList" @tap="goToInfo"></item>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
|
|
<script>
|
|
// 组件 封装html代码的一种方案
|
|
// 全局组件 导入 注册 使用
|
|
// 局部组件 导入 注册 使用
|
|
// 组件通讯（数据传递）
|
|
// 父组件 ---> 子组件
|
|
// props
|
|
// 子组件 ---> 父组件
|
|
// $emit
|
|
// 兄弟组件 ---> 兄弟组件
|
|
// 插槽
|
|
// vue-router
|
|
|
|
// 组件名 html标签名称
|
|
// 全局组件
|
|
Vue.component('item', {
|
|
// props: [ 'list' ],
|
|
props: {
|
|
listData: {
|
|
type: Array,
|
|
default: () => []
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
title: '全局组件 - 底部导航组件'
|
|
}
|
|
},
|
|
template: `
|
|
<div class="footer">
|
|
<ul>
|
|
<li v-for="(item,index) in listData" :key="index" @click="change(index)">
|
|
{{ item.title }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
`,
|
|
methods: {
|
|
change(i) {
|
|
this.$emit("tap", i)
|
|
}
|
|
}
|
|
})
|
|
|
|
var a = {
|
|
data() {
|
|
return {
|
|
title: '局部组件 - 测试',
|
|
list: [
|
|
{ id: 1, title: '社会1' },
|
|
{ id: 2, title: '社会2' },
|
|
{ id: 3, title: '社会3' },
|
|
{ id: 4, title: '社会4' },
|
|
]
|
|
}
|
|
},
|
|
template: `
|
|
<div class="test">
|
|
<p>{{ title }}</p>
|
|
<item :list-data="list" @tap="priimg"></item>
|
|
</div>
|
|
`,
|
|
methods: {
|
|
priimg(index) {
|
|
console.log("显示图片预览：", index);
|
|
}
|
|
}
|
|
}
|
|
|
|
var vm = new Vue({
|
|
el: '.app',
|
|
data: {
|
|
newsList: [
|
|
{ id: 1, title: '首页1' },
|
|
{ id: 2, title: '首页2' },
|
|
{ id: 3, title: '首页3' },
|
|
{ id: 4, title: '首页4' },
|
|
]
|
|
},
|
|
methods: {
|
|
goToInfo(index) {
|
|
console.log("goToInfo 进详情: ", index);
|
|
}
|
|
},
|
|
components: {
|
|
'lb-test': a
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |