vue 组件

举报
武师叔 发表于 2022/08/30 08:39:49 2022/08/30
【摘要】 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 是单向数据流,用于父组件向子组件传值。

  1. 在父组件中定义数据
<div id="app">  
  <greet-bar :first-name='sname' last-name = '赵四'></greet-bar>
</div>

<script>
  new Vue({
    el:"#app",
    data:{sname:"尼古拉斯"}
  });
</script>Copy to clipboardErrorCopied
  1. 子组件读取并显示
Vue.component("greet-bar",{
  props::['first-name', 'last-name'],  //也可以使用驼峰式接收 firstName
  template:'
    <div>
      <p>大家好,我是{{first-name + "·" + last-name}}</p>
    </div>
  '
})
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。