本文详细介绍了Vue中的组件定义，特别是局部组件的创建及其与vue实例的区别。重点讲解了组件间的通信方式，包括父传子、子父通信以及使用ref属性进行双向通信。此外，还涵盖了事件总线作为不同组件层级间通信的手段，以及动态组件和slot插槽的高级用法，如具名插槽的应用。
这里写目录标题
一.昨日回顾
1 购物车案例
2 v-model之lazy,number,trim
-lazy:input框的数据绑定等失去焦点以后在变化
-number:input框中333dsda,变成333
-trim:input去首尾空格
3 与后端交互
-jq的ajax
-fetch
-axios:get,put,post,delete..(带头,带数据...)
-跨域问题(如何处理)
4 与后端交互之fetch
5 与后端交互之axios
6 计算属性之首字母大写
-函数当做变量来使用,有缓存,在页面上使用多次,只执行一次
7 通过计算属性重写过滤案例
8 组件定义
-组件化开发:全局组件,局部组件
-组件中有html,css,js:数据是独立的
二.补充:vue的开源项目,在本地运行
## vue的开源项目，在本地运行起来（别人开源了一个djago项目，跑在本地）
1 vue项目:安装node(python解释器)--->一路下一步-->(node:python3,npm:pip)
2 使用pycharm打开vue项目
3 terminal中输入:npm install (安装这个vue项目所有的依赖:pip3 install -r requ.txt)
4命令行下执行: npm run serve /npm run start / npm run dev 等同于:python manage.py runserver
三.今日内容
0.组件定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<div @click="handleClick">我是根组件的div</div>
<child></child>
<ul>
<li v-for="i in 4">{
{i}}</li>
</ul>
<div>
<child v-if="isShow"></child>
</div>
</div>
</body>
<script>
//创建组件对象(全局组件)
Vue.component('child', {
template: `
<div>
<div style="background: red" @click="handleClick">我是头部</div>
<div v-if="isShow">显示消失</div>
</div>
`,
methods: {
handleClick() {
console.log('我被点击了')
this.isShow = !this.isShow
}
},
data() {
return {
isShow: true
}
},
})
var vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleClick() {
console.log('根组件我被点击了')
}
}
})
</script>
</html>
1.定义局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<child></child>
<child1></child1>
</div>
</body>
<script>
Vue.component('child1', {
template: `
<div>
<div style="background: red" @click="handleClick">我是头部</div>
<div v-if="isShow">显示消失</div>
<child></child>
</div>
`,
methods: {
handleClick() {
console.log('我被点击了')
this.isShow = !this.isShow
}
},
data() {
return {
isShow: true
}
},
})
var vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods: {
handleClick() {
console.log('根组件我被点击了')
}
},
//局部组件
components:{
child:{
//child组件名
template:`
<div @click="handleClick">{
{name}}</div>
`, //组件模板
methods:{
handleClick(){
console.log('我被点了')
}
},
data(){
return{
name:'lqz'
}
},
},
}
})
</script>
</html>
2.组件编写方式与vue实例的区别
1.自定义组件需要有一个root element，一般包裹在一个div中,跟vue实例一样
2.父子组件的data是无法共享
3.组件可以有data，methods,computed…,但是data 必须是一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
最低0.47元/天 解锁文章
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
