组件命名
1.字母全小写且必须包含一个连字符 my-componnect
2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>
3.使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的(非字符串的模板中使用时只有 kebab-case 是有效的)
插槽 slot标签
缓存页面
缓存组件:
keepAlive实现数据缓存不刷新
<keepAlive>
<router-view></router-view>
</keepAlive>
组件通讯
组件兄弟传递信息
1. 定义全局
window.EventHub = new Vue();
2.
在组件1methods中的方法发送数据
EventHub.$emit("hello",this.val);
在组件2的方法mounted中接收数据
EventHub.$on("hello",res=>{
this.val = res;
});
组件 父=>子
1. 在父级的data的return中定义一个变量
solgan:"welcome to china"
2. 在子组件的props中接收
props:['solgan'] // 可以是数组或对象
3. 在template中的组件标签上
<cnp1 v-bind:solgan="solgan"></cnp1>
components:{
cnp1:{
name:"cnp1",
props:['solgan'],
},
cnp2:{
name:"cnp2"
}
}
组件 子=>父
1.在组件1methods中的方法发送数据
this.$emit("sloganEvent",this.val);
2.在template中的组件标签上
<cnp1 v-on:sloganEvent="onSloganEvent"></cnp1>
3.在父组件的methods方法中接收函数信息
methods:{
onSloganEvent(val){
this.msg = val;
}
}
prop 父组件传递数据的自定义属性
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件
Prop 验证
propA:{
type:String,
required:true,
default: function () {
return { message: 'hello' }
}
}
type:可以是下面的原生构造器
String
Number
Boolean
Function
Object
Array
//type 也可以是一个自定义构造器,使用 instanceof 检测。
自定义事件
//父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件
//如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on
<my-component v-on:click.native="doTheThing"></my-component>
ref属性 ref="aaa" 节点上 在mounted中 // 找到此节点 console.log(this.$refs.aa)
router-link 跳转
<router-link to="/music/search"></router-link>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目