Vue:实践学习笔记(3)——组件使用
Vue:实践学习笔记(3)——组件使用
全局注册
1.注册组件
Vue.component('my-component',{
//选项
})
说明:my-component就是注册的组件自定义的标签名称,推荐使用小写加减号的形式分割命名。
2.显示组件内容
<div id="app1">
<my-component></my-component>
</div>
<script>
Vue.component("my-component", {
template: '<div>Hello World</div>'
});
var app = new Vue({
el: '#app1'
})
</script>
说明:template的 DOM 结构必须被一个元素包含,如果直接写内容,不带div是无法渲染的。
局部注册
1.注册组件
<div id="app2">
<my-component1></my-component1>
</div>
<script>
var child ={
template:'<div>Hello World!!</div>'
}
var app2 = new Vue({
el:"#app2",
components:{
'my-component1':child
}
})
</script>
说明:局部注册后的组件只在该实例范围内有效。
说明:组件模板会在某些条件下受到制约,比如table下只允许有tr、td、th等这些表格元素。
2.使用JS属性来挂载组件
<div id="app1">
<!-- 使用标签加载组件 -->
<my-component></my-component>
<!-- 下面使用JS来挂载组件 -->
<table>
<tbody is='my-component'></tbody>
</table>
</div>
<script>
Vue.component("my-component", {
template: '<div>Hello World</div>'
});
var app = new Vue({
el: '#app1'
})
</script>
说明:这里用到了 is 属性,用来指明挂载的组件名称,来实现动态挂载。
Data属性
1.data函数返回数据
<script>
Vue.component("my-component", {
template: '<div>{{message}}</div>',
data:function(){
return{
message:"Hello MrSaber"
}
}
});
var app = new Vue({
el: '#app1'
})
</script>
说明:除了template属性外,还有其他属性,比如data、computed、method等。但是在使用data时,data必须是函数,然后将数据return出去。
2.注意引用实现复用
JavaScript 对象是引用关系,所以如果 return 出的对象引用了外部的一个对象,那这个对象就是共享的,任何一方修改都会同步。
<div id="app3">
<my-component2>
</my-component2>
<my-component2>
</my-component2>
<my-component2>
</my-component2>
</div>
<script>
var data = {
counter: 0
}
Vue.component('my-component2', {
template: '<button @click="counter++">{{counter}}</button>',
data: function(){
return data;
}
})
var app = new Vue({
el:'#app3'
})
</script>
组件使用了 3 次 , 但是点击任意一个<button> , 3个的数字都会加 1 ,那是因为组件的 data 引用的是外部的对象,这肯定不是我们期望的效果 , 所以给组件返回一个新的 data 对象来独立 , 修改如下 :
Vue.component('my-component2', {
template: '<button @click="counter++">{{counter}}</button>',
data: function(){
return {
counter:0
};
}
})
Props属性
1.基本用法
组件不仅仅要把模板的内容进行复用,更重要的是组件间要进行通信。通常父组件的模板包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递过程要通过Pros属性进行传递。
props的值可以是两种:字符串数组或对象,此处为数组的渲染代码:
<!--Props属性 -->
<div id="app4">
<!-- 使用标签加载组件 -->
<my-components message='来自父组件的数据'></my-component>
</div>
<script>
Vue.component("my-components", {
props:['message'],
template: '<div>{{message}}</div>'
});
var app = new Vue({
el: '#app4'
})
</script>
说明:props 中声明的数据与组件 data 函数 return 的数据主要区别就是 props 的来自父级而 data中的是组件自己的数据,作用域是组件本身。
2.关于属性驼峰的处理:
<div id="app">
<my-component warning-text ="提示信息"></ my-component>
</div>
<script>
Vue.component ('my-component', {
props: ['warningText'],
template:' <div>{{ warningText }} </div>'
})
var app =new Vue({
el:'#app'
})
</script>
说明:由于HTML特性不区分大小写,当使用 DOM 模板时,驼峰命名 CcamelCase )的 props 名称要转为短横分隔命名。
3.动态获取
<div id="app5">
<input type="text" v-model='parentMessage' />
<my-componentss :message='parentMessage'></my-componentss>
</div>
<script>
Vue.component("my-componentss", {
props: ['message'],
template: '<div>{{message}}</div>'
});
var app = new Vue({
el: '#app5',
data: {
parentMessage: ''
}
})
</script>
说明:这里用 v-model 绑定了父级的数据 parentMessage,当通过输入框任意输入时,子组件接收到的 props “ message”也会实时响应,并更新组件模板。
4.传递数组
<my-component message="[1,2,3]"></my-component>
<my-component :message="[1,2,3]"></my-component>
说明:如果要传递数组话,第一个长度为7,因为被解析成字符串,第二个使用v-bind才会被解析成数组。
5.数据验证
Vue.component ('my-component', {
props {
//必须是数字类型
propA : Number ,
//必须是字符串或数字类型
propB : [String , Number] ,
//布尔值,如果没有定义,默认值就是 true
propC: {
type : Boolean ,
default : true
//数字,而且是必传
propD: {
type: Number ,
required : true
},//如果是数组或对象,默认值必须是一个函数来返回
propE: {
type : Array ,
default : function () {
return [] ;
//自定义一个验证函数
propF: {
validator : function (value) {
return value > 10;
}
}
} )
组件通信
1.自定义事件
当子组件要向父组件传递数据时,需要用到自定义事件。这里我们用到的指令时v-on,用在普通元素上时,只能监听原生DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。子组件用$emit来触发事件,父组件用$on来监听子组件的事件。
父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件的触发事件.
我们先在完成一个Demo,当我们点击按钮的时候,父组件获取到子组件现在的值。示例代码如下:
<template>
<div>
{{total}}
<my-component @increase = "handleGetTotal"></my-component>
</div>
</template>
<style>
</style>
<script>
var child = {
template:'<button @click="increaseNum">+1</button>',
data:function(){
return {counter:0}
},
methods:{
increaseNum:function()
{
this.counter++;
this.$emit("increase",this.counter);
}
}
};
export default {
components:{
"my-component":child
},
data:function(){
return {total:0}
},
methods:{
handleGetTotal:function(total){
this.total =total;
}
}
}
</script>
2.使用v-model
仍然是点击按钮+1的效果,不过这次组件$emit的事件名是特殊的input,在使用组件的父级,并没有在<my-component>上使用@input="handler",而是直接使用v-model绑定的一个数据total,这也可以称作一个语法糖。
说明:
下面与上面的原理一样,但是下面这种方便理解!
在Vue-CLi中使用自定义组件
到现在为止,我们已经基本梳理了组件的各个使用功能。在实际开发中,即在使用Vue脚手架的时候,需要快速引入我们的组件
首先编写组件
组件分三部门,template、style、script,此处我们用了props属性来方便父级传值。
<template>
<div class="line">{{message}}</div>
</template>
<style>
.line{
height: 45px;
border-bottom: 3px solid #f8f8f9;
}
</style>
<script>
export default {
props:['message'],
data () {
return {
value5: '',
value6: ''
}
}
}
</script>
在Main.js中注册全局组件
import blockLine from './views/components/block-line'; ...... Vue.component('blockLine',blockLine);
说明:
Vue.Component的API解释:
注册局部组件
其实在刚开始的时候,我们已经说了组件的注册方式分为两种,第一种是全局注册、第二种是局部注册,局部注册,我们只需要在要使用自定义组件的Vue文件中的components属性中声明即可:
<script>
import recomList from './recom-list.vue';
export default {
data() {
return {
value1: 0
}
},
components: {
recomList
}
}
</script>
Vue:实践学习笔记(3)——组件使用的更多相关文章
- Vue:实践学习笔记(1)——快速使用
Vue:实践学习笔记(1)——快速使用 Vue基础知识 0.引入Vue 官方地址:Vue的官方下载地址 Vue推荐博客:keepfool 在你的程序中快速引入Vue: <!-- 开发环境版本,包 ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vue:实践学习笔记(5)——Vue-Cli脚手架的使用
Vue:实践学习笔记(5)——Vue-Cli脚手架的使用 快速开始 项目配置 可视化配置 vue ui 命令配置 vue init webpack vue-demo(项目名) 运行测试 进入vue-d ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue 自学笔记(七) 组件细节问题
前情提要: 这里盘点一下,组件细节的问题 现在我们观察一些用框架开发的网页BiliBili.掘金,会发现很多部分都十分相似或者一模一样,我们甚至可以将其拆分归类.而事实上,页面的确是被一个个组件构成的 ...
- vue学习笔记(七)组件
前言 在前面vue的一些博客中,我们几乎将vue的基础差不多学习完了,而从本篇博客开始将会进入到vue的另一个阶段性学习,本篇博客的内容在以后的vue项目中占很大的比重,所以小伙伴们需要认真学习,本篇 ...
- Vue 学习笔记之 —— 组件(踩了个坑)
最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
随机推荐
- C++程序设计(第4版)读书笔记_指针、数组与引用
void * 函数指针和指向类成员的指针不能被赋给void * 字符串字面值常量 #include <iostream> using namespace std; void f() { c ...
- typescript 接口的新认识
interface 用于接收服务器的数据. eg: interface mmmmm { x: string, y: number, z: number, select: KnockoutObserva ...
- Android开发学习秘籍笔记(十九)
吼.花了2天最后做出了一个类似于蓝牙串口助手功能的小程序,事实上也是实习公司的要求---有一个蓝牙无线扫描枪,要求终端能够通过蓝牙连接到该设备,而且蓝牙无线扫描枪扫描二维码或者条形码的时候能够将二维码 ...
- Swoole系列(二):安装
Window是没办法安装的,服务器版本建议用linux的centos7 Php版本5.4 安装步骤: 1.更新你的yum yum update 2.安装php相关扩展 2.yum install ph ...
- 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML ...
- 认识oracle的update更新
这两天给新同事安排了一个工作,即做一个update 的级联更新,在实际操作中发现了一个问题.就是对于Oracle的更新的语法,大部分人尤其是学过SqlServer的人在使用oracle的时候对于ora ...
- git commit --amend用法
提交信息很长时间内会一直保留在你的代码库(code base)中,所以你肯定希望通过这个信息正确地了解代码修改情况. 下面这个命令可以让你编辑最近一次的提交信息,但是你必须确保没有对当前的代码库(wo ...
- TCP和UDP 协议发送数据包的大小
在进行UDP编程的时候,我们最容易想到的问题就是,一次发送多少bytes好? 当然,这个没有唯一答案,相对于不同的系统,不同的要求,其得到的答案是不一样的,这里仅对像ICQ一类的发送聊天消息的情况作分 ...
- iOS 数组的去重(普通的无序的去重和排序好的去重)
本文转载至 http://blog.csdn.net/zhaopenghhhhhh/article/details/24972645 有时需要将NSArray中去除重复的元素,而存在NSArray中的 ...
- 编写自己的cp命令
有时候要对整个目录做备份,修改cp1.c使得当两个参数都是目录时,把第一个目录中的所有文件复制到第二个目录中,文件名不变.那么该如何实现? 我们先来看看cp1.c的实现方式,它从一个文件中读取数据然后 ...