关于vue组件封装以及插槽使用的操作

2023-11-28 00:57| 来源: 网络整理| 查看: 265

文章为个人学习vue项目中的笔记，好记性不如烂笔头，方便日后查看，如有疏漏请见谅！

文章目录 vue组件的封装注册组件父组件向子组件传值子组件向父组件传值把事件绑定到子组件插槽的使用

vue组件的封装注册组件

1.注册全局组件

子组件

子组件内容

注册全局组件语法：

//main.js文件中 import headerTop from "./components/common/tagName" //引入组件 Vue.component("tagName",options);

tagName 为组件名，options 为配置选项。注册后，可以直接调用组件：

父组件

2.注册局部组件 Vue.js 也同样支持局部注册，我们可以在一个组件内部使用 components 选项做组件的局部注册，例如：

子组件

子组件内容

父组件

// 1.第一步：在父组件中导入子组件 import Child from "../components/child.vue"; export default { components: {// 2.第二步：父组件中注册子组件 Child, }, data() { return { }; }, }; 父组件向子组件传值

1.components/Child.vue 定义子组件

子组件内容 {{data}} export default { props: ['data'], // 接收父组件给子组件定义的属性 }

2.components/Father.vue 定义父组件

父组件内容父组件显示:{{msg}} // @指定的是src路径 import Child from '@/views/demo/Child' // 1.第一步：在父组件中导入子组件 export default { // 2.第二步：父组件中注册子组件 components: { Child },data() { return { msg: '父组件的信息' } }, methods: { } } 子组件向父组件传值

1.components/Child.vue 子组件

子组件的内容子组件显示:{{data}} 调用父组件方法 export default { // 子组件要使用父组件的数据,需要在props中接收父组件的属性 props:['data'],//接收父组件给子组件定义的属性 data() { return { } }, methods: { //1.子组件调用父组件方法,并传值 childClick(){ this.$emit('chuan','子组件信息修改后的data信息,传递给父组件') } }, }

2.components/Father.vue 定义父组件

父组件的内容父组件显示:{{msg}} import Child from '@/views/demo/Child' // 1.第一步：在父组件中导入子组件 export default { // 2.第二步：父组件中注册子组件 components:{ Child }, data() { return { msg:'父组件的信息' } }, methods: { //4.在父组件中定义一个change方法，可以在子组件中触发并传值给父组件 fatherClick(data){ this.msg=data //更新父组件的内容 } }, } 把事件绑定到子组件

通过 v-on的 .native 修饰符，将事件绑定到子组件，点击子组件控制父组件中值的增减

子组件

子组件内容 {{ data }} 点击 export default { // 子组件要使用父组件的数据，需要在 props中接收父组件的属性 props: ["data"], // 接收父组件给子组件定义的属性 } data() { return {}; }, methods: {}, };

父组件

父组件中商品数量：{{ number }} import Child from "../components/child.vue"; export default { components: { Child, }, data() { return { number: 0, }; }, methods: { //点击事件 addNum() { this.number++; }, }, }; 插槽的使用

1.默认插槽

我们可能希望这个内绝大多数情况下都渲染文本“Submit”，但是有时候却希望渲染文本为别的东西，那怎么实现呢？我们可以将“Submit”作为后备内容，我们可以将它放在标签内

子组件

Submit

==父组件：==使用子组件时

Save

2.具名插槽

有时我们写了一个子组件，我们希望

对于这样的情况，元素有一个特殊的 attribute：name。这个 attribute 可以用来定义额外的插槽：

子组件：

父组件：

一个不带 name 的出口会带有隐含的名字“default”。父组件在向具名插槽提供内容的时候，我们可以在一个元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：

我是父组件 Here might be a page title A paragraph for the main content. And another one. Here's footer info

注意: v-slot 只能添加在上具名插槽在书写的时候可以使用缩写,v-slot用#来代替

3.作用域插槽

这里主要解决的是父组件在向子组件插槽传递模板内容时存在访问子组件数据的问题还记得默认插槽吗？如果子组件中写在标签内后备内容是与该组件的data属性双向数据绑定的

{{user.firstName}} export default { data () { return { user:{ firstName:'gerace', lastName:'haLi' } } } }

父组件在引用子组件时，希望能够换掉备用内容,会发现提示报错

因为：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的那应该怎么解决这个问题？为了让 user 在父级的插槽内容中可用，我们可以将 user 作为元素的一个 attribute 绑定上去：

绑定在元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

{{ slotProps.user.firstName }} import myslot from './myslot'; export default { components: { myslot }

【本文地址】

公司简介

联系我们