vue组件的几种书写方式

最新推荐文章于 2024-04-21 17:17:00 发布
最新推荐文章于 2024-04-21 17:17:00 发布
阅读量2k 收藏 2
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjing1019/article/details/79534356
版权

vue组件实现Tab切换功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <script src="https://cdn.bootcss.com/vue/2.4.1/vue.min.js"></script>
</head>
<body>

    <div id="app">
        <div :is="tabShow"></div>
        <button @click="tab('A')">tab1</button>
        <button @click="tab('B')">tab2</button>
        <button @click="tab('C')">tab3</button>
        <button @click="tab('D')">tab4</button>
    </div>
      
    <script>

      A = {
        template:`<h1>我是第一一一个tab</h1>`
      }
      B = {
        template:`<h1>我是第二二二个tab</h1>`
      }
      C = {
        template:`<h1>我是第三三三个tab</h1>`
      }
      D = {
        template:`<h1>我是第四四四个tab</h1>`
      }

      new Vue({
        el:'#app',
        data(){
          return {
            tabShow:'A'
          }
        },
        components:{
            'A': A,
            'B': B,
            'C': C,
            'D': D
        },
        methods:{
            tab(currentShowTab){
                this.tabShow = currentShowTab;
            }
        }

      })

    </script>
</body>
</html>

两个组件方式，还有一种是 .vue 为后缀的文件组件,需要模块化才能用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <div id="app">

      <!-- 一个全局化组件 hello -->
      <hello></hello>
      <hr>
      <!-- 一个局部组件 world -->
      <world></world> 
      
    </div>
      
    <script>

      //注意：组件要写在实例之前，不然就会报错
      Vue.component('hello',{
        template:`<h1>我是一个全局话组件</h1>`
      });

      //局部组价 需要用components 去注册
      world = {
        template:`<h2>我是一个局部组件</h2>`
      }
      //实例
      new Vue({
        el:'#app',
        data(){
          return {}
        },
        //components 注册world组件
        components:{
          'world': world
        }
      })
    </script>
</body>
</html>

单项数据流，父组件向子组件传参数，用props接受

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>

    <div id="app">

      <!-- 一个局部组件world， 把message数据传给子组件-->

      <world :here="message"></world> 

    </div>
      
    <script>

      world = {
        // props接收父组件传过来的here
        props:['here'],
        template:`<h2> {{here}} </h2>`
      }

      new Vue({
        el:'#app',
        data(){
          return {
            message:'不让任何事情成为你不去学习的理由--李华明'
          }
        },
        components:{
          'world': world
        }
      })

    </script>
</body>
</html>

嵌套的组件使用方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Demo</title>
    <script src="https://unpkg.com/vue"></script>
</head>
<body>

    <div id="app">
      <world></world> 
    </div>
  
    <script>
      // 嵌套的子组件必须卸载父组件之上
      city = {
        template: `<div>我是子组件的子组件</div>`
      }
      //嵌套的组件
      world = {
        template:`
            <div>
                <h2>我是子组件</h2>
                <city></city>
            </div>`,
        components:{
            'city': city
        }
      }
      new Vue({
        el:'#app',
        data(){
          return {
            message:'不让任何事情成为你不去学习的理由--李华明'
          }
        },
        components:{
          'world': world
        }
      })
    </script>
</body>
</html>



欢迎关注我的个人技术公众号！javascript艺术

作者：拯救宇宙是我的使命
链接：https://www.jianshu.com/p/5757e2198304
來源：简书

欢迎关注我的个人技术公众号！javascript艺术
javascript艺术
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基本写法
SYQ15544423296的博客
07-28 3021
Vue基本写法
怎么写vue组件
夏天的博客
06-17 3184
1.分析：什么时候要写组件呢？ 举例如下图，一个页面中被反复引用的东西，可以将它提取出来写成一个组件。 2.组件怎么写？ 1.index.vue文件(主页) <template> <view class="Policy-page"> <listItem /> </view> </template> <script src="./Policy.js"> import listItem from './componen
『VUE』18. 组件结构与导入组件的方法（详细图文注释）
最新发布
MZH
04-21 1199
『VUE』18. 组件结构与导入组件的方法（详细图文注释）
Vue的组件化编程
热门推荐
暗武逢天的博客
07-11 2万+
Vue组件化
vue的methods中方法写法
weixin_42542581的博客
09-05 3463
vue的methods中存放方法，写法有aaa(){ }和bbb:function(){ }
vue公共方法怎么写
alertloveyou的博客
01-13 1814
公共方法： 创建一个js存放公共方法：如在utils文件夹中创建一个timeCheck.js文件 js文件： export default { timeFormat(Time){ var time = new Date(Time); var year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate(); var ho
Vue 中可以定义组件模版的几种方式
10-16
总结来说，选择哪种方式定义Vue组件模板取决于项目需求、团队习惯和开发者偏好。在实际开发中，通常会结合使用多种方式，以达到最佳的开发效果。单文件组件由于其完整性、可维护性和与构建工具的良好集成，成为了...
Vue组件模板的几种书写形式(3种)
10-15
主要介绍了Vue组件模板的几种书写形式(3种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue组件命名和props命名代码详解
10-16
首先，Vue组件的命名有以下几种方式： 1. **kebab-case（短横线命名）**：例如`my-component`。这种命名方式在HTML中书写最为直观，因为HTML属性名称不支持驼峰命名。在Vue模板中，你可以直接以`<my-component>`的...
掌握Vue的20种写法，让开发效率翻倍！
weixin_64051447的博客
03-08 1144
打开 Vue3 的官方文档，它首先会告诉你，Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。文档为我们提供一系列两种风格的代码参考，供我们按照偏好进行选择。实际上，Vue3 组件可不止两种写法，而是多达十几种！然而，不管是什么写法，它们都是基于同一个底层系统实现的，概念之间也是彼此相通的，只是使用的接口不同。在实际开发中，我们也不会同时使用到那么多种写法，但是这并不意味着我们不需要去了解这些写法！
利用vue写几个常用的方法
xin的博客
06-10 1329
利用vue写几个常用的方法(仅供平时借鉴): <li class="item teal"> <a href="javascript:;" @click="shows(0)" v-bind:class="sel==0?'cur':''" class="font30 col000">全部</a> </li> <li class="item teal" v-for="(item
vue的 三种组件：局部组件、外部组件、全局组件
weixin_45727786的博客
05-14 1153
vue的 三种组件：局部组件、外部组件、全局组件 1.局部组件 例： 2.外部组件 例： 3.全局组件 例：
vue的组件都有哪几种类？？
weixin_48009560的博客
04-25 1427
一.父组件向子组件传值 1.创建子组件，在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props，然后创建一个名为message的属性 3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值 4.保存修改的文件，查看浏览器 父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数
vue之组件简介和分类
RyleeLouth的博客
10-30 1600
前置条件 如果项目开发的比较多、大的情况，发现，很多页面之间其实存在一些公共的部分，可以被反复的进行使用。为了代码的复用，以及后期维护的方便，我们应该尽可能把公共的部分提取出来，然后形成一个独立的部分，然后供其他的部分使用。这个公共的部分我们称之为组件。（很久以前的传统网页开发里面这种我们一般叫做模板继承（layout）。 什么是组件？ 根据经验，或者写了很多代码，把这些可能被复用的代码部分提取出...
vue组件的四种写法
xm2by的博客
04-11 5398
        数据驱动和组件化是vue.js两个最重要的特点。组件化是为了方便代码复用，提高开发效率。常见的vue组件写法有四种，各有特色，适用于不同的场景。1、全局组件结构：// 组件的注册 Vue.component( 'componentName', { template: // 组件的html结构, data(){ return{ ...
Vue 组件开发的几种方式
绿足 博客
12-15 960
aa
VUE创建使用组件的5种方式
qq_37196621的博客
03-11 362
第一种 // 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function() { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg'...
Vue组件的3种书写形式
qq_39581763的博客
11-01 488
Vue组件的3种书写形式 第一种使用script标签： <!DOCTYPE html> <html> <body> <div id="app"> <my-component></my-component> </div> <-- 注意：...
回顾Vue组件常见写法(一)
weixin_44971067的博客
11-20 1073
类似React提倡组件式的写法，Vue也为我们提供了丰富的组件编写，下面是自己常用的两种： 一.单文件组件(暴露props、method、event) 基于Vue的SFC(单文件组件)的拓展，最大目的就是要对外提供 配置项、事件操作回调、插槽扩展，下面写个简单的Vue组件： <template> <div> <!--此处用于引入其他组件的 二次使用 常用v-bind v-on 进行穿透--> <van-rate v-model="va.
vue3子组件调父组件方法
08-03
在Vue3中，子组件调用父组件的方法有几种写法。一种是使用异步方式，父组件定义供子组件调用的方法，并在子组件中使用`context.emit`方法触发该方法。具体写法如下：[2] 父组件： ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值