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

文章目录

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

vue组件的封装

注册组件

1.注册全局组件

子组件

<template>
<div><h1>子组件内容</h1><div class="container"><!-- 预留插槽 --><slot></slot></div>
</div>
</template>

注册全局组件语法：

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

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

父组件

<tagName></tagName>

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

子组件

<template>
<div><h1>子组件内容</h1><div class="container"><!-- 预留插槽 --><slot></slot></div>
</div>
</template>

父组件

<template>
<div>
<!--第三步：使用组件-->
<child></child>
</div>
</template><script>
// 1.第一步：在父组件中导入子组件
import Child from "../components/child.vue";
export default {components: {// 2.第二步：父组件中注册子组件
Child,
},
data() {return {};
},
};
</script>

父组件向子组件传值

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

<template>
<div style="color: red">
<h1>子组件内容</h1>
<p>{{data}}</p> <!--子组件的数据由父组件传入--> <!-- 预留插槽 --><slot></slot>
</div>
</template>
<script>
export default {props: ['data'], // 接收父组件给子组件定义的属性 }
</script>

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

<template>
<div>
<h1>父组件内容</h1>
父组件显示:{{msg}}
<!--3.第三步：把父组件的某一个属性传递给子组件-->
<Child :data='msg' ></Child>
</div>
</template>
<script>
// @指定的是src路径
import Child from '@/views/demo/Child' // 1.第一步：在父组件中导入子组件
export default {
// 2.第二步：父组件中注册子组件
components: {
Child
},data() {
return {msg: '父组件的信息'
} },
methods: {}
}
</script>

子组件向父组件传值

1.components/Child.vue 子组件

<template>
<div style="color:red"><h1>子组件的内容</h1><p>子组件显示:{{data}}</p><button @click="childClick">调用父组件方法</button><!-- 预留插槽 --><slot></slot>
</div>
</template><script>
export default {// 子组件要使用父组件的数据,需要在props中接收父组件的属性
props:['data'],//接收父组件给子组件定义的属性
data() {return {}
},
methods: {//1.子组件调用父组件方法,并传值childClick(){this.$emit('chuan','子组件信息修改后的data信息,传递给父组件')}
},
}
</script>

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

<template>
<div><h1>父组件的内容</h1><p>父组件显示:{{msg}}</p><!--3.第三步：把父组件的某一个属性传递给子组件--><Child:data='msg'@chuan='fatherClick'></Child>
</div>
</template><script>
import Child from '@/views/demo/Child' // 1.第一步：在父组件中导入子组件
export default {// 2.第二步：父组件中注册子组件
components:{Child
},
data() {return {msg:'父组件的信息'}
},
methods: {//4.在父组件中定义一个change方法，可以在子组件中触发并传值给父组件fatherClick(data){this.msg=data //更新父组件的内容}
},
}
</script>

把事件绑定到子组件

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

子组件

<template>
<div style="color: red">
<h1>子组件内容</h1>
<p>{{ data }}</p>
<!-- <div>按钮</div> -->
<button type="primary">点击</button><!-- 预留插槽 --><slot></slot>
</div>
</template> <script>
export default {// 子组件要使用父组件的数据，需要在 props中接收父组件的属性
props: ["data"], // 接收父组件给子组件定义的属性 }
data() {return {};
},
methods: {},
};
</script>

父组件

<template>
<div>
<div>父组件中商品数量：{{ number }}</div>
<child @click.native="addNum"></child>
</div>
</template><script>
import Child from "../components/child.vue";
export default {components: {Child,
},
data() {return {number: 0,
};
},
methods: {//点击事件
addNum() {this.number++;
},
},
};
</script>

插槽的使用

1.默认插槽

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

子组件

<button type="submit">
<slot>Submit</slot>
</button>

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

<!--不提供任何插槽内容时：后备内容“Submit”将会被渲染-->
<submit-button></submit-button>

<!--提供任何插槽内容时：“Save”将会被渲染-->
<submit-button>
Save
</submit-button>

2.具名插槽

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

<template><div class="container"><header><!-- 我们希望把页头放这里 --></header><main><!-- 我们希望把主要内容放这里 --></main><footer><!-- 我们希望把页脚放这里 --></footer></div>
</template>

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

子组件：

<template>
<div class="container"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer>
</div>
</template>

父组件：

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

<template>
<div><div>我是父组件</div><child><template v-slot:header><h1>Here might be a page title</h1></template><p>A paragraph for the main content.</p><p>And another one.</p><template v-slot:footer><p>Here's footer info</p></template></child>
</div>
</template>

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

3.作用域插槽

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

<template>
<div><span><slot>{{user.firstName}}</slot></span>
</div>
</template><script>
export default {data () {return {user:{firstName:'gerace',lastName:'haLi'}}}
}
</script>

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

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

<span>
<slot v-bind:user="user">{{ user.lastName }}
</slot>
</span>

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

<template>
<myslot><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template>
</myslot>
</template><script>
import myslot from './myslot';
export default {components: {myslot}
</script>

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

Vue 组件封装之 ScrollView 上拉加载更多
Vue 组件封装之 ScrollView 上拉加载更多一.ScrollView 上拉加载更多二.使用案例三.API 使用指南四.源代码一.ScrollView 上拉加载更多组件说明: 实现 ...
Vue 组件封装之 Questionnaire 问卷调查
Vue 组件封装之 Questionnaire 问卷调查前言一.Questionnaire 组件二.使用案例三.API 使用指南四.源代码前言问卷调查表也是目前前端比较常见的开发项目,目 ...
Vue 组件封装之 Content 列表(处理多行输入框 textarea)
Vue 组件封装之 Content 列表一.Content 列表二.使用案例三.API 使用指南四.源代码一.Content 列表组件说明: 实现 Content 列表布局排版. 效果展示 ...
Vue 组件封装之 List 列表
Vue 组件封装之 List 列表一.List 列表二.使用案例三.API 使用指南四.源代码一.List 列表组件说明: 实现 List 列表布局排版. 效果展示: 实现的功能: 在一个 ...
Vue 组件封装之 Search 搜索
Vue 组件封装之 Search 搜索一.Search 组件二.使用案例三.API 使用指南四.源代码一.Search 组件组件说明: 实现搜索功能. 效果展示: input 输入框背景铺 ...
Vue组件封装，（面试回答）
在我用vue开发项目的时候,一般我都会用到组件封装,采用组件化的思想进行项目开发,我在搭建一个项目的时候,就会创建一个views目录和一个commen目录和一个feature目录,views目录中放页 ...
Vue 组件封装之 Tab 切换
Vue 组件封装之 tab 切换一.Tab 切换组件二.使用案例三.API 使用指南四.源代码五.总结一.Tab 切换组件组件说明: 实现 tab 切换. 效果展示: 实现 tab 切换 ...
Vue组件封装的过程
Vue组件封装的过程 vue组件的定义组件(Component)是Vue.js最强大的功能之一组件可以扩展HTML元素,封装可重用代码在较高层面上,组件是自定义元素,Vue.js的编译器为他添加 ...
Vue 组件封装、组件传值、数据修改
Vue 组件封装封装的意义当一个页面元素过多或者一个组件在多个页面都会被使用,就可以进行组件封装,可以对单个页面解耦,增加代码的可读性,并且多次使用的组件方便修改,只用修改一个地方就能对用到这个组 ...

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