vue---day02
2024-08-28 19:37:11
1. 全局组件的注册 - 创建根实例的时候，data可以是object，也可以是函数
- 创建组件的时候，data必须是函数 1.1 创建
Vue.component('global-component',{
template:`
<div>
<h1>{{ hello }}</h1>
</div>
`,
data(){
return {
hello:'hello'
}
},
})
1.2 使用
let vm = new Vue({
el:'#app',
template:`
<global-component></global-component>
`,
})
1.3 使用
<div id="app">
<global-component></global-component>
</div> let vm = new Vue({
el:'#app',
})
2. 局部组件
- data必须是函数(单体函数)
- 没有el属性
2.1 创建局部组件 实质就是创建JavaScript object
let Header = {
template:`
<div>{{ hello }}</div>
`,
data(){
return {
'hello':'hello',
}
},
};
2.2 注册
2.2.1
//单独使用
new Vue({
el:'#app',
template:`<app-header></app-header>`,
components:{
'app-header':Header,
},
});
2.2.2
//嵌套使用
let App = {
template:`
<div>111</div>
<app-header></app-header>
`,
components:{
'app-header':Header,
},
};
new Vue({
el:"#app",
template:`<App></App>`,
components:{
App,
},
});
3. 组件之间通信
- 父子组件之间的数据 传递拥props 接受父组件的一个事件
- 子父组件之间的数据 传递拥$emit 触发父组件的一个事件
3.1 父子之间通信
<div id="app>
...
</div> let Header = {
template:`
<div>{{ xxx }}</div>
`,
props:['xxx'],
}; let App = {
template:`
<app-header :xxx='parent-data'></app-header>
`, components:{
'app-header':Header,
},
data(){
return {
'parent-data':'父组件的数据',
}
}
}; new Vue({
el:'#app',
template: `<App></App>`,
components:{
App,
}
})
3.2 子父组件的通信
<div id="app">
</div>
let Header = {
template: `
<div>
<button @click="xxx">给父组件传递数据</button>
</div>
`,
data() {
return {
'childData': '子组件的数据'
}
},
methods: {
xxx() {
this.$emit('ooo',this.childData);
}
}
};
let App = {
template: `
<div>
<h1>父组件接受的数据---{{ childData }}</h1>
<app-header @ooo="get_data"></app-header>
</div>
`,
data() {
return {
'childData': '1',
}
},
components: {
'app-header': Header,
},
methods: {
get_data(value) {
console.log(111,value)
this.childData = value;
}
},
};
new Vue({
el: '#app',
template: `<App></App>`,
components: {
App,
},
})
4. 混入
- 定义一个mixs object 然后写方法methods(){}
- 使用：mixins = [minx]
- 解决代码重用
<div id="app">
<dog></dog>
<cat></cat>
</div> <script> let mixs = {
methods:{
show(value){
alert(value+'来了');
},
hide(value){
alert(value+'走了');
},
}
}; let Cat = {
template: `
<div>
<button @click="show('小猫')">小猫来了</button>
<button @click="hide('小猫')">小猫走了</button>
</div>
`,
data() { },
mixins:[mixs]
}; let Dog = {
template: `
<div>
<button @mouseenter="show('小狗')">Come</button>
<button @mouseleave="hide('小狗')">Go</button>
</div>
`,
mixins: [mixs],
}; new Vue({
el: '#app',
components: {
'dog':Dog,
'cat':Cat,
},
}) </script>
5. 插槽
<div id="app">
<global-components>首页</global-components>
<global-components>轻课</global-components>
<global-components>学位课</global-components>
</div> Vue.components('global-components',{
template:`
<div><slot></slot></div>
`
}) new Vue({
el:'#app',
})
6. 具名插槽
<div id="app">
<global-components>
<div>
<slot name="header>这是头部</slot>
<slot name="footer>这是尾部</slot>
</div>
</global-components> </div> Vue.components('global-components',{
template:`
<div>
<slot name="footer"></slot>
<slot name="header"></slot>
</div>
`
}) new Vue({
el:'#app',
})
最新文章
- 中文分词工具探析（二）：Jieba
- SQLServer 2008 R2 对同时含有数字和中文的字段进行排序
- Codeforces Round #371 (Div. 2) C. Sonya and Queries
- 电赛总结（三）——DA芯片总结
- STL源码分析----神奇的 list 的 sort 算法实现
- jmeter做接口测试
- cocos2d-x 纹理研究
- 访问者模式(Visitor)
- jQuery_基础
- Objective-C——判断对象等同性
- Selenium+Python之163邮件发送
- PAT (Advanced Level) 1050. String Subtraction (20)
- JAVA设计模式：代理模式&& 装饰模式区别
- 记一次解析XML转对象的笔记
- 【机器学习PAI实践一】搭建心脏病预测案例
- Sublime codeIntel 配置支持php自动提示
- Cocos2D iOS之旅:如何写一个敲地鼠游戏(六):放置地鼠
- sessionStorage的保存和获取
- 配置trunk
- 关于springboot2.x 的 RedisCacheManager变化