vue 组件
【摘要】 vue 组件vue 前端框架的基本功能单元是组件,vue 对象本身也是一个组件(根组件)。 全局组件Vue.component 用于声明全局组件(不推荐)。在 vue 中, template 表示组件模板,即组件要展示的内容。模板内只能含有一个根元素!Vue.component("greet-bar",{ template:' <div> <p>大家好,我是{{nam...
vue 组件
vue 前端框架的基本功能单元是组件,vue 对象本身也是一个组件(根组件)。
全局组件
Vue.component
用于声明全局组件(不推荐)。
在 vue 中, template
表示组件模板,即组件要展示的内容。模板内只能含有一个根元素!
Vue.component("greet-bar",{
template:'
<div>
<p>大家好,我是{{name}}</p>
<button value="改名" v-on:click="changeName"></button>
</div>
',
data:function(){
return {name:"王东浩"}
},
methods:{
changeName:function(){
this.name="甘甜"
}
}
})Copy to clipboardErrorCopied
全局注册的组件可以直接用在任何的 Vue 根实例 (new Vue) 的模板中。
<div id="app">
<greet-bar></greet-bar>
<greet-bar></greet-bar>
</div>
<script>
new Vue({
el:"#app",
data:{}
});
</script>Copy to clipboardErrorCopied
html 文件元素名和属性名不区分大小写,因此不可采用驼峰形式。但在 vue 组件中可以作为驼峰形式识别,全局组件命名为 GreetBar 也能被读取。
局部组件
为避免用户需要一次性加载过多组件,我们可以定义局部组件,只在指定的 vue 对象中使用。
var greetA = {
data:function(){
return {name:"王东浩"}
,
template:'<p>hello {{name}}</p>'
};
var greetB = {
data:function(){
return {name:"陈伯言"}
,
template:'<p>hello {{name}}</p>'
};Copy to clipboardErrorCopied
在 vue 中声明要调用的组件,就可以在组件内完成调用。
<div id="app">
<greet-a></greet-a>
<greet-b></greet-b>
</div>
<script>
new Vue({
el:"#app",
data:{},
components:{
'GreetA': GreetA,
'GreetB': GreetB
},
// components: { GreetA, GreetB },
});
</script>Copy to clipboardErrorCopied
vue 单文件组件(.vue)
在实际项目开发中,我们往往为每一个组件创建一个单独的文件来定义。之间的相互调用统一交由 router 管理。
<template>
模板内容 html
</template>
<script>
业务逻辑 export
</script>
<style>
组件样式 css
</style>
组件交互
父组件向子组件传值
在 vue 中, props
是单向数据流,用于父组件向子组件传值。
- 在父组件中定义数据
<div id="app">
<greet-bar :first-name='sname' last-name = '赵四'></greet-bar>
</div>
<script>
new Vue({
el:"#app",
data:{sname:"尼古拉斯"}
});
</script>Copy to clipboardErrorCopied
- 子组件读取并显示
Vue.component("greet-bar",{
props::['first-name', 'last-name'], //也可以使用驼峰式接收 firstName
template:'
<div>
<p>大家好,我是{{first-name + "·" + last-name}}</p>
</div>
'
})
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)