vue组件传值的方式--杂项

vue组件传值的方式

1.创建vue项目，准备

• 创建好项目之后，删除掉views中的about.vue和home.vue以及components目录中的HelloWorld.vue文件。
• 再将router中index.js中导入组件的语句删除或者注释
  如下图：
  
• app.vue中
  

2.创建新的文件结构如下

• 在components目录下创建MParent.vue以及MChild.vue文件

MParent.vue

<template>
  <div>
    <div>父组件</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

MChild.vue

<template>
  <div>
    <div>子组件</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped></style>

3.组件“三步曲”

• 在app.vue中导入子组件MParent.vue，在 MParent.vue中导入子组件MChild.vue
  • 组件‘三部曲’
    （1）导入组件

  <script>
  import 组件名   from ‘@/components/组件.vue’
  export default{
  ...
  }
  </script>
  

  （2）注册组件

  import 组件名   from ‘@/components/组件.vue’
  export default{
  components:{
  组件名
  }
  }
  </script>
  

  （3）使用组件

  <template>
  <组件></组件>
  </template>
  

4.父组件给子组件传值（常用Props传值）

• 将MParent.vue组件导入进入app.vue,将MChild.vue组件导入进入MParent.vue组件中

• 他们的关系：app.vue是MParent.vue组件的父组件，MParent.vue是MChild.vue的父组件

• 使用属性绑定的形式进行传值
  父组件
  
  子组件
  
  效果
  

5.子组件向父组件传值（自定义事件传值$emit）

• 在子组件中定义一个方法，这个方法用来传递子组件的值

• 父组件
  
  效果图
  

6.$parent和$children

$parent与$children类似
注意：此处返回的是一个数组

7.ref

效果

注意：此处返回的是一个对象

8.非父子组件传值$emit、$on

• 在src下新建一个文件夹，util,在其中新建bus.js文件

import Vue from 'vue'
export default new Vue()

• 在app.vue中导入bus.js
• 在app.vue中写一个按钮，用来触发事件，触发的事件中，定义传递的自定义事件名称以及设置传递的值

• 在MChild.vue组件中，导入bus.js文件，在MChild.vue挂载的时候，监听自定义事件，来接收app.vue组件传递过来的值。
  

9.$attrs|$linteners

爷爷 ->父亲->儿子
爷爷

父亲

儿子

效果

10.vuex

这里先不整理，下个文档整理