如何自定义组件:
<div id="app">
<abc>abc>
div>
<script>
// 3.1创建组件构造器
let Profile = Vue.extend({
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: `
我是描述信息
`
});
// 3.2注册已经创建好的组件
// 第一个参数: 指定注册的组件的名称
// 第二个参数: 传入已经创建好的组件构造器
Vue.component("abc", Profile );
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
}
});
script>
方式二:
<div id="app">
<abc>abc>
div>
<template id="info">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息p>
div>
template>
<script>
Vue.component("abc", {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info"
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
}
});
script>
自定义全局组件,在任何一个Vue实例控制的区域中都可以使用。
自定义局部组件,只能在自定义的那个Vue实例控制的区域中可以使用
局部组件自定义方式:
在vue实例中新增components: {}
在{}中通过key/vue形式注册组件
components:{
abc: {}
}
示例如下:
<div id="app1">
<abc>abc>
div>
<div id="app2">
<abc>abc>
div>
<template id="info">
<div>
<img src="images/fm.jpg"/>
<p>我是描述信息p>
div>
template>
<script>
/*
// 自定义全局组件
Vue.component("abc", {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info"
});
*/
// 这里就是MVVM中的View Model
let vue1 = new Vue({
el: '#app1',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
}
});
// 这里就是MVVM中的View Model
let vue2 = new Vue({
el: '#app2',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
"abc": {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info"
}
}
});
script>
Vue实例控制的区域相当于一个大的组件, 在大组件中我们可以使用data和methods
而我们自定义的组件也是一个组件, 所以在自定义的组件中也能使用data和methods
在自定义组件中不能像在vue实例中一样直接使用data,而是必须通过返回函数的方式来使用data,因为自定义组件可以复用, 为了保证复用时每个组件的数据都是独立的,必须这样定义。
<div id="app">
<button @click="appFn">我是按钮button>
<p>{
{appMsg}}p>
<abc>abc>
div>
<template id="info">
<div>
<img src="images/fm.jpg"/>
<button @click="abcFn">我是按钮button>
<p>{
{abcMsg}}p>
div>
template>
<script>
// 自定义全局组件
Vue.component("abc", {
// 注意点: 在创建组件指定组件的模板的时候, 模板只能有一个根元素
template: "#info",
methods: {
abcFn(){
alert("abcFn");
}
},
// data: {
// abcMsg: "学院"
// }
// 注意点: 虽然在自定义的组件中也可以使用data, 但是在使用的时候, 使用的方式和Vue实例中不太一样
// 在自定义组件中使用data必须赋值一个函数, 然后通过函数的返回值来定义有哪些数据
data: function () {
return {
abcMsg: "学院"
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
appMsg:"知播渔"
},
// 专门用于存储监听事件回调函数
methods: {
appFn(){
alert("appFn");
}
},
// 专门用于定义计算属性的
computed: {
}
});
script>
对于普通的元素我们可以通过v-if来实现切换
对于组件我们也可以通过v-if来实现切换
因为组件的本质就是一个自定义元素
<div id="app">
<button @click="toggle">切换button>
<home v-if="isShow">home>
<photo v-else>photo>
div>
<template id="home">
<div>
<p>我是首页p>
div>
template>
<template id="photo">
<div>
<img src="images/fm.jpg" alt="">
div>
template>
<script>
// 自定义全局组件
Vue.component("home", {
template: "#home",
});
Vue.component("photo", {
template: "#photo",
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
isShow: true
},
// 专门用于存储监听事件回调函数
methods: {
toggle(){
this.isShow = !this.isShow;
}
},
// 专门用于定义计算属性的
computed: {
}
});
script>
通过v-if/v-else-if/v-else确实能够切换组件,但是在Vue中切换组件还有一种更专业的方式
<component v-bind:is="需要显示组件名称">component>
component我们称之为动态组件, 也就是你让我显示谁我就显示谁。
component可以配合keep-alive来保存被隐藏组件隐藏之前的状态
<div id="app">
<button @click="toggle">切换button>
<keep-alive>
<component v-bind:is="name">component>
keep-alive>
div>
<template id="home">
<div>
<p>我是首页p>
<input type="checkbox">
div>
template>
<template id="photo">
<div>
<img src="images/fm.jpg" alt="">
div>
template>
<script>
// 自定义全局组件
Vue.component("home", {
template: "#home",
});
Vue.component("photo", {
template: "#photo",
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
isShow: true,
name: "home"
},
// 专门用于存储监听事件回调函数
methods: {
toggle(){
this.isShow = !this.isShow;
this.name = this.name === "home" ? "photo" : "home";
}
},
// 专门用于定义计算属性的
computed: {
}
});
script>
给组件添加动画和过去给元素添加动画一样,如果是单个组件就使用transition,如果是多个组件就使用transition-group
默认情况下进入动画和离开动画是同时执行的, 如果想一个做完之后再做另一个, 需要指定动画模式
<head>
<meta charset="UTF-8">
<script src="js/vue.js">script>
<style>
.v-enter{
opacity: 0;
margin-left: 500px;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
margin-left: 500px;
}
style>
head>
<div id="app">
<button @click="toggle">切换button>
<transition mode="out-in">
<component v-bind:is="name">component>
transition>
div>
<template id="home">
<div>
<p>我是首页p>
<input type="checkbox">
div>
template>
<template id="photo">
<div>
<img src="images/fm.jpg" alt="">
div>
template>
<script>
// 自定义全局组件
Vue.component("home", {
template: "#home",
});
Vue.component("photo", {
template: "#photo",
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
name: "home"
},
// 专门用于存储监听事件回调函数
methods: {
toggle(){
this.name = this.name === "home" ? "photo" : "home";
}
},
// 专门用于定义计算属性的
computed: {
}
});
script>
在一个组件中又定义了其它组件就是父子组件,其实局部组件就是最简单的父子组件, 因为我们说过可以把Vue实例看做是一个大组件。我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以实局部组件就是最简单的父子组件。
自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components,所以我们也可以在自定义组件中再定义其它组件
<div id="app">
<father>father>
div>
<template id="father">
<div>
<p>我是父组件p>
<son>son>
div>
template>
<template id="son">
<div>
<p>我是子组件p>
div>
template>
<script>
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
"father": {
template: "#father",
components: {
"son": {
template: "#son"
}
}
}
}
});
script>
在Vue中子组件是不能访问父组件的数据的,如果子组件想要访问父组件的数据, 必须通过父组件传递
数据传递方式:
<div id="app">
<father>father>
div>
<template id="father">
<div>
<p>{
{name}}p>
<p>{
{age}}p>
<son :parentname="name" :abc="age">son>
div>
template>
<template id="son">
<div>
<p>{
{parentname}}p>
<p>{
{abc}}p>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
data: function(){
return {
name: "lnj",
age: 33
}
},
// 子组件
components: {
"son": {
template: "#son",
// 这里通过parentname接收了父组件传递过来的数据
props: ["parentname", "abc"]
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
在Vue中子组件是不能访问父组件的方法的,如果子组件想要访问父组件的方法, 必须通过父组件传递
方法传递方式:
<div id="app">
<father>father>
div>
<template id="father">
<div>
<button @click="say">我是按钮button>
<son @parentsay="say">son>
div>
template>
<template id="son">
<div>
<button @click="sonFn">我是按钮button>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
methods: {
say(){
alert("www.it666.com");
}
},
// 子组件
components: {
"son": {
template: "#son",
/*
注意点: 和传递数据不同, 如果传递的是方法, 那么在子组件中不需要接收
如果传递的是方法, 那么需要在子组件中自定义一个方法
如果传递的是方法, 那么在子组件中直接使用自定义的方法即可
如果传递的是方法, 那么需要在子组件自定义的方法中通过
this.$emit("自定义接收的名称")的方法来触发父组件传递过来的方法
* */
// props: ["parentsay"]
methods: {
sonFn(){
this.$emit("parentsay");
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
既然我们可以将父组件的方法传递给子组件,可以在子组件中调用父组件中的方法,
那么我们就可以在调用方法的时候给方法传递参数,传递的参数, 就是我们需要传递的数据
<div id="app">
<father>father>
div>
<template id="father">
<div>
<button @click="say">我是按钮button>
<son @parentsay="say">son>
div>
template>
<template id="son">
<div>
<button @click="sonFn">我是按钮button>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
methods: {
say(data){
// alert("www.it666.com");
console.log(data);
}
},
// 子组件
components: {
"son": {
template: "#son",
methods: {
sonFn(){
// 第一个参数: 需要调用的函数名称
// 后续的参数: 给调用的函数传递的参数
this.$emit("parentsay", "知播渔");
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
注意事项
在Vue中如果儿子想使用爷爷的数据, 必须一层一层往下传递
在Vue中如果儿子想使用爷爷的方法, 必须一层一层往下传递
<div id="app">
<grandfather>grandfather>
div>
<template id="grandfather">
<div>
<p>{
{name}}p>
<button @click="say">我是按钮button>
<father :gfname="name" @gfsay="say">father>
div>
template>
<template id="father">
<div>
<p>{
{gfname}}p>
<button @click="fatherFn">我是按钮button>
<son :fname="gfname" @fsay="fatherFn">son>
div>
template>
<template id="son">
<div>
<p>{
{fname}}p>
<button @click="sonFn">我是按钮button>
div>
template>
<script>
// 爷爷组件
Vue.component("grandfather", {
template: "#grandfather",
data: function(){
return {
name: "lnj"
}
},
methods: {
say(){
console.log("我是爷爷的方法");
}
},
// 爸爸组件
components: {
"father": {
template: "#father",
props: ["gfname"],
methods:{
fatherFn(){
this.$emit("gfsay");
}
},
// 儿子组件
components: {
"son": {
template: "#son",
props: ["fname"],
methods: {
sonFn(){
this.$emit("fsay");
}
},
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽,插槽就是在子组件中放一个"坑", 以后由父组件来"填"。
匿名插槽, 会利用使用时指定的内容替换整个插槽, 如果有多个匿名插槽, 每一个匿名插槽都会被指定的内容替换,虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽。
<div id="app">
<father>father>
div>
<template id="father">
<div>
<son>
<div>我是追加的内容1div>
<div>我是追加的内容2div>
<div>我是追加的内容3div>
son>
div>
template>
<template id="son">
<div>
<div>我是头部div>
<slot>我是默认数据slot>
<div>我是底部div>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
// 子组件
components: {
"son": {
template: "#son",
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份,这导致了所有插槽中填充的内容都是一样的
如果我们想给不同的插槽中填充不同的内容,就可以使用具名插槽
通过插槽的name属性给插槽指定名称,在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽,如果没有指定要替换哪个插槽中的内容, 则不会被替换
<div id="app">
<father>father>
div>
<template id="father">
<div>
<son>
<div slot="one">我是追加的内容1div>
<div slot="one">我是追加的内容11div>
<div slot="two">我是追加的内容2div>
<div slot="two">我是追加的内容22div>
son>
div>
template>
<template id="son">
<div>
<div>我是头部div>
<slot name="one">我是默认内容slot>
<slot name="two">我是默认内容slot>
<div>我是底部div>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
// 子组件
components: {
"son": {
template: "#son",
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
v-slot指令是Vue2.6中用于替代slot属性的一个指令,
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽
v-slot指令只能用在template标签上,可以使用#号替代v-slot:
<div id="app">
<father>father>
div>
<template id="father">
<div>
<son>
<template #one>
<div>我是追加的内容1div>
<div>我是追加的内容11div>
template>
<template #two>
<div>我是追加的内容2div>
<div>我是追加的内容22div>
template>
son>
div>
template>
<template id="son">
<div>
<div>我是头部div>
<slot name="one">我是one默认内容slot>
<slot name="two">我是two默认内容slot>
<div>我是底部div>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
// 子组件
components: {
"son": {
template: "#son",
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据
使用方式:
<div id="app">
<father>father>
div>
<template id="father">
<div>
<son>
<template slot-scope="abc">
<li v-for="(name, index) in abc.names">{
{name}}li>
template>
son>
div>
template>
<template id="son">
<div>
<div>我是头部 {
{names}}div>
<slot v-bind:names="names">我是默认内容 {
{names}}slot>
<div>我是底部div>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
// 子组件
components: {
"son": {
template: "#son",
data:function () {
return {
names: ["zs", "ls", "ww", "zl"]
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>
v-slot可以指令告诉Vue内容要填充到哪一个具名插槽中,还可以通过v-slot指令告诉Vue如何接收作用域插槽暴露的数据,格式:v-slot:插槽名称=“作用域名称”
<div id="app">
<father>father>
div>
<template id="father">
<div>
<son>
<template #one="abc">
<li v-for="(name, index) in abc.names">{
{name}}li>
template>
son>
div>
template>
<template id="son">
<div>
<div>我是头部 {
{names}}div>
<slot name="one" v-bind:names="names">我是默认内容 {
{names}}slot>
<div>我是底部div>
div>
template>
<script>
// 父组件
Vue.component("father", {
template: "#father",
// 子组件
components: {
"son": {
template: "#son",
data:function () {
return {
names: ["zs", "ls", "ww", "zl"]
}
}
}
}
});
// 这里就是MVVM中的View Model
let vue = new Vue({
el: '#app',
// 这里就是MVVM中的Model
data: {
},
// 专门用于存储监听事件回调函数
methods: {
},
// 专门用于定义计算属性的
computed: {
},
// 专门用于定义局部组件的
components: {
}
});
script>