Vue5--自定义组件/父子组件/组件多级传递/插槽
自定义全局组件
- 在
中定义模板 - 在Vue.component中注册模板(“模板名”, {
template: “#模板id”
}); - 在html中通过
<模板名>使用模板
这是一个模板
这真的是一个模板
自定义局部组件
- 在
中定义模板 - 在Vue实例的components中以{}注册组件，注册形式为
{ '模板名'：{ template:'#模板id'}} - 在该Vue实例绑定的标签中以 模板名 的形式使用组件
这是一个模板
这真的是一个模板
自定义组件中的data和methods
- 自定义组件中的函数定义在methods中
- 自定义组件中的data定义在函数的返回值中
{{msg}}
使用keep-alive实现动态组件（组件是否显示）
在component中，根据is的值决定哪个组件被渲染
keep-alive能保存被隐藏的组件在隐藏之前的状态
所以通过 keep-alive 和 component 配合使用，能实现组件动态显示，并保存组件在隐藏之前的状态
{{msg}}
{{msg2}}
组件中使用过渡动画
如果是单个组件就使用transition
如果是多个组件就使用transition-group
在默认情况下，进入动画和离开动画同时执行，如果要指定动画的执行顺序，在transition中指定mode
父子组件
通过在自定义组件中再定义其子组件的形式定义父子组件
这是爸爸
这是儿子
父子组件之间的数据传递
如果子组件想访问父组件中的数据，必须由父组件传递，子组件接收
在父组件中通过v-bind传递数据，传递格式 v-bind:自定义接收名称 = “要传递数据”
在子组件中通过props接收数据，接收格式 props: [“自定义接收名称”]
这是爸爸
这是儿子---{{dadname}}==={{dadsex}}
父子组件之间的方法传递
想要在子组件中调用父组件中的方法：
在父组件中通过v-on传递方法：传递格式 v-on:自定义接收名称 = “要传递方法”
在子组件中自定义一个方法：在自定义方法中通过 this.$emit(‘自定义接收名称’)触发传递过来的方法
子组件调用父组件方法时传递参数
this.$emit（需要调用的函数名称，传递的参数…)
组件命名
- 注册组件的时候使用了"驼峰命名", 那么在使用时需要转换成"短横线分隔命名"
例如: 注册时: myFather -> 使用时: my-father - 在传递参数的时候如果想使用"驼峰名称", 那么就必须写"短横线分隔命名"
例如: 传递时: parent-name=“name” -> 接收时: props: [“parentName”] - 在传递方法的时候不能使用"驼峰命名", 只能用"短横线分隔命名"
@parent-say=“say” -> this.$emit(“parent-say”);
{{name}}
{{parentName}}
组件多级传递
在Vue中如果儿子想使用爷爷的数据, 必须一层一层往下传递
在Vue中如果儿子想使用爷爷的方法, 必须一层一层往下传递
Title
{{msg}}
{{yeyemsg}}
{{dadmsg}}
匿名插槽
默认情况下，在父组件中调用子组件中，如果向子组件的标签中添加内容，则这部分内容不会被渲染。
使用slot插槽，在子组件中挖一个坑，父组件有需求时再填，实现动态添加子组件中的内容。
slot没有name属性时，是匿名插槽。在子组件中有几个匿名插槽，在父组件中填充的数据就会被拷贝几份，所以一般只写一个匿名插槽。
这是将template中slot标签中的默认内容替换的数据
这是一个p
我是默认数据
这又是一个p
具名插槽
给slot添加name属性，就是具名插槽。在填充时，通过slot=‘插槽名’，将内容添加到该插槽中。没有给某具名插槽添加内容的，将会使用该插槽的默认内容。
这是name=‘one'插槽的数据
这是一个p
我是默认数据
我是默认数据
这又是一个p
v-slot
v-slot指令是Vue2.6中用于替代slot属性的一个指令
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽
注意点: v-slot指令只能用在template标签上。可以使用#号替代v-slot
one中的内容
two中的内容
这是一个p
我是默认数据
我是默认数据
这又是一个p
作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据—》子组件提供数据, 父组件决定如何渲染
- 在slot中通过
v-bind:数据名="数据"方式暴露数据 - 在父组件中通过
接收数据 - 在父组件的
中通过 作用域名称.数据名称 方式使用数据 - 匿名插槽可以使用
#default="作用域"具名插槽可使用#插槽名="作用域"
{{name}}
{{data}}
ppppp