vue 父子组件传参&插槽简单使用

vue 父子组件传参&插槽简单使用

###为什么要使用组件？
1.若多个页面都使用同一套模板渲染内容，那么就很有必要来封装一个公共组件来渲染；
2.尽管多个页面看起来是相似的，样式上可能会有细微的差别，那么我们可以使用插槽来解决这个问题；

###区分父子组件
1.封装公共组件，实际上就是抽离出一个子组件；每次使用它，创建一个新的父组件来调用它即可；
2.那么父和子组件就很容易区分，父组件是调用者，子组件是公共组件；

###上代码 公共组件（子组件）

1.props 中为要从父组件中来获取的动态值；
2.{{role}},就是动态值，在父组件还没写，但是确定了传参，可以先定义好放这里；

###父组件，一般写在view目录下的页面

1.先import,引入后在components声明;
若不想在这import,还可在main.js中定义，这样属定义全局组件，定义后其他页面可直接使用；
import Dept from ‘./components/Dept.vue’;
Vue.component(“myDept”,Dept);
2.在template中直接使用组件即可；把要传入的参数使用v-bind(:)传参；
3.在路由中定义好路由后可以看到效果页面；

###插槽v-slot
1.为什么会使用插槽；
2.若在一详情页面，展示详情一致，而底部按钮不一样，则在公共组件可不定义具体按钮样式，使用插槽；

1.这是子组件中先定义具名插槽口子；

1.父组件中使用 插槽，在插槽里直接写按钮，包括样式；
2.若样式需要调整，在style 中加上 scoped属性即可；