定义Vue 组件

什么是组件:组件的出现,就是为了拆分 Vue 实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件;

组件化和模块化的不同:

  • 模块化:是从代码逻辑的角度进行划分的;方便代码的分层开发,保证每个功能模块的职能单一;
  • 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;
全局定义组件的三种方式
<!-- 引用方式 -->
<my-com></my-com>
  1. 使用 Vue.extend 配合 Vue.component 方法
// 定义
var com = Vue.extend({
    template: '<h3>创建了一个H3</h3>'  // 通过 template 属性 指定了组件要展示的属性
});
// 使用 Vue.component ('组件的名称', 创建出来的组件模板对象) 如果组件名是驼峰命名引用时需要加 -
Vue.component('myCom', com)

Vue.component('myCom', Vue.extend({ // 缩写
    template: '<h3>创建了一个H3</h3>'
}));
  1. 直接使用 Vue.component 方法
Vue.component('myCom', {
   template: '<div><h1>直接使用 component 创建的全局组件</h1><span>123</span></div>'
});
  1. 使用 Vue 提供的 template 标签 并结合 Vue.component 方法
<!-- 在Vue实例控制的区域之外定义 -->
<template id="temp">
    <h1>使用 template 标签, 之后再去 Vue实例中去引用 </h1>
</template>
Vue.component('myCom', {
    template: '#temp'
});

注意: 组件中的 DOM 结构, 有且只能有唯一的根元素(Root Element) 来进行包裹

定义私有组件
var vm = new Vue({
    el: '#app',
    components: {
        myCom: {
            template: '可以使用模板, 也可以只写表标签,规则与上述一致'
        }
    }
});
组件中的 data 和 methods
data
// 组件中可以有自己的 data 但是必须是一个方法, 还要 return 一个对象
Vue.component('myCom', {
    template: '<h1>调用方式和 Vue 实例一致: {{ msg }}</h1>',
    data: function () {
        return {
            msg: '组件中的data'
        }
    }
});
methods
Vue.component('myCom', {
   template: '<div><intpu type="button" value="+1" @click(increment)><h1>{{ msg }}</h1></div>',
   data: function () {
       return {msg : 0};
   },
   methods: {
    increment () {
        this.msg += 1;
    }
   }
});
切换组件的两种方式
使用 flag 标识符 结合v-if v-else 指令切换组件
<!-- 页面 -->
<div id="app">
    <a href="" @click="flag=true"></a>
    <a href="" @click="flag=false"></a>
    <login v-if="flag"></login>
    <register v-else="flag"><register>
</div>
// Vue 实例  此方法对于数量有一定缺陷
Vue.component('login', {
    template: '<h3>假设这是登录的组件</h3>'
});
Vue.component('register', {
    template: '<h3>假设这是注册的组件</h3>'
});
var vm = new Vue({
    el: '#app',
    data: { flag = true }
});
使用 component 标签, 来引用组件, 并通过 :is 属性指定要加载的组件
<!-- 页面 -->
<div id="app">
    <a href="" @click.prevent="comName='login'"></a>
    <a href="" @click.prevent="comName='register'"></a>
    <!-- component 是一个占位符, :is 属性,可以用来指定要展示组件的名称 -->
    <component :is="comName"></component>
</div>
Vue.component('login', {
   template: '<h3>假设这是登录的组件</h3>'
});
Vue.component('register', {
   template: '<h3>假设这是注册的组件</h3>'
});
var vm = new Vue({
    el: '#app',
    data: { comName: 'login' }
});
组件过渡动画
.v-enter, .v-leave-to {
    opacity: 0;
    transform: translateX(80px);
}
.v-enter-active, .v-leave-active {
    transition: all 0.4s ease;
}
<!-- 只是需要 transition 把 组件包裹起来就可以了 通过mode设置动画模式 -->
<transition mode="out-in">
    <component :is="comName"></component>
</transition>
父组件向子组件传递值
<div id="app">
    <!-- 1: 先通过 v-bind: 绑定自定义属性 然后指定值 -->
    <son v-bind:parentmsg="msg"></son>
</div>
var vm = new Vue({
    el: '#app',
    data: {
        msg: '这是父组件的内容'
    },
    components:
        son: {
            // 3: 通过 {{ parentmsg }} 的方式调用父组件中的值
            template: '这是子组件的内容 -- {{ parentmsg }}',
        },
        // 注意: props 是只读的, 虽然可以修改, 但是会报错
        props: ['parentmsg'], // 2: 再通过 props 定义父组件传过来的值
});
子组件向父组件传值
  1. 原理:父组件将方法的引用,传递到子组件内部,子组件在内部调用父组件传递过来的方法,同时把要发给父组件的数据,在调用方法的时候当做参数传递过去;
  2. 父组件将方法的引用传递给子组件,其中,getMsg 是组件中 methods 中定义的方法名,func 是子组件调用传递过来方法时候的方法名称 <son @func="getMsg"></son>
  3. 子组件内部通过 this.$emit('方法名', 要传递的数据) 方式, 来调用组件中的方法, 同时把数据传递给父组件使用
<div id="app">
    <son @func="getMsg"></son>
</div>
<template id="tmp">
    <input type="button" value="点击传递" @click="give">
</template>
var vm = new Vue({
  el: '#app',
  data: { fromChild: null },
  methods: {
    getMsg(param) {
      this.fromChild = param;
    }
  },
  components: {
    son: {
      template: '#tmpl',
      methods: {
        myclick() {
          this.$emit('func', this.child);
        }
      },
      data() {
        return {
          child: { name: 'son'}
        };
      },
    }
  }
});
使用 this.$refs 获取元素和组件
<div id="app">
    <input type="button" value="获取元素内容" @click="getElement" />
    <!-- 使用 ref 获取元素 -->
    <h1 ref="myh1"> 这是一个 h1 </h1>
    <hr />
    <!-- 使用 ref 获取子组件 -->
    <my-com ref="mycom"></my-com>
</div>
<script>
    Vue.component('my-com', {
        template: '<h5>这是一个子组件</h5>',
        data() {
            return { name: '子组件' }
        },
        methods: {
            show() {
                console.log('这是子组件的show方法');
            }
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getElement() {
                // 通过 this.$refs 来获取元素
                console.log(this.$refs.myh1.innerText);
                // 通过 this.$refs 来获取组件 data 以及 methods
                console.log(this.$refs.mycom);
                console.log(this.$refs.mycom.name);
                console.log(this.$refs.mycom.show());
            }
        }
    });
</script>

Vue 基础 day03的更多相关文章

  1. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

  3. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇:传值+组件+项目说明

    缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...

  4. python 全栈开发,Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)

    一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...

  5. Vue 基础精讲

    Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...

  6. Vue基础以及指令

    Vue 基础篇一   一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...

  7. 2-5 vue基础语法

    一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...

  8. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  9. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

随机推荐

  1. UVa 10294(polya 翻转与旋转)

    Arif in Dhaka(First Love Part 2) Input: standard input Output: standard output Time Limit: 2 seconds ...

  2. GUI学习之十七——QDoubleSpinBox学习总结

    在上一章我总结了QSpinBox的使用方法,QSpinBox是用来操作整数或离散集合的,还有另外一种控件是用来操作浮点类数据的,就是QDoubleSpinBox. 一.描述 QDoubleSpinBo ...

  3. es相关查询接口

    1.查看指定es中所有的索引 GET http://IP:9200/_cat/indices?v 2.修改指定索引的相关配置信息 PUT http://IP:9200/index_name/_sett ...

  4. 048:ORM模型基本的增删改查操作

    ORM对数据库的增删改查基本操作: 创建模型如下: 基本的增删改查如下:

  5. springboot自定义异常视图

    一.源码分析 先看源码再写自己的自定义异常视图         resolveErrorView()函数首先调用了一个返回ModelAndView的函数,该函数所需的参数是一个状态码的字符串,和一个m ...

  6. div写表格,原生滚动条,数据能够自动滚动

    如何让表格的滚动条能够自动滚动呢? html: <div class="tabinner5"> <div class="tab5 tab5a" ...

  7. Es6 之 const关键字

    https://blog.csdn.net/jin_doudouer/article/details/80493649 es6中新增了一个const.就是用来定义一个常量的.以前其实一直没有把这个放在 ...

  8. [window] 使用Pyhton轻便好用的spyder IDE进行代码分析时如何指定相关的配置文件

    spyder 使用pylint这个第三方库进行代码检查,其实pylint使用的代码规范默认也是pep8,不过该库还有 其它用途,在这里我专门写写在代码分析时,如何指定配置文件 一般来说,使用spyde ...

  9. WEB超大文件上传与下载

    1.介绍enctype enctype 属性规定发送到服务器之前应该如何对表单数据进行编码. enctype作用是告知服务器请求正文的MIME类型(请求消息头content-type的作用一样) 1. ...

  10. 【CF1251E】Voting(贪心)

    题意:有n个人,需要搞到全部n个人的票,搞到第i个人的票有两种方式:之前已经搞到mi个人的票,或者直接花费pi 问最小的搞到所有票的总代价 n<=2e5,1<=p[i]<=1e9,0 ...