父子组件传值

1、props+属性

  1. <!-- 父组件 -->
  2. <template>
  3.   <div>
  4.     <!-- 调用父组件传递的数据 -->
  5.     <!-- 在子组件调用的时候，通过属性绑定的方式，将父组件的数据传递给子组件 -->
  6.     <comp :parent-msg="msg" @p_click="pClick"></comp>
  7.     <!-- 在接受的时候，数据名如果是使用的驼峰语法，那在组件引用的时候必须使用肉串语法 -->
  8.   </div>
  9. </template>
  10. <script>
  11.   export default {
  12.     data() {
  13.       return {
  14.         msg: "parents's msg!!",
  15.       }
  16.     },
  17.     methods: {
  18.       pClick(name) {
  19.         console.log(name + ',' + "parents's click")
  20.       },
  21.     },
  22.   }
  23. </script>
  1. <!-- 子组件 comp.vue -->
  2. <template>
  3.   <div>
  4.     <p @click="sonClick">子组件自己的数据：{{ sonMsg }} ---></p>
  5.     <p @click="p2Click('jack')">父组件传递的数据：{{ parentMsg }}</p>
  6.   </div>
  7. </template>
  8. <script>
  9.   export default {
  10.     // 子组件 需要 使用 props 属性接受，父组件传来的数据
  11.     data(){
  12.       // data 上的数据，是属于子组件自己的，可读可写
  13.       return {
  14.         sonMsg: 'son-message'
  15.       },
  16.     },
  17.     // 接收 父组件传值，可读不可写
  18.     props: ['parentMsg'],
  19.     methods:{
  20.         sonClick(){
  21.             console.log("son's click!!")
  22.         },
  23.       p2Click(name){
  24.           // $emit 触发 父组件 传递过来的方法， 第二个参数是 传递过去的 参数
  25.         this.$emit('p_Click', name)
  26.       }
  27.     }
  28.   }
  29. </script>

2、组件上的 父子组件传值 - 图2children[i]

  1. // 子组件
  2. this.$parent.msg // 读取 父组件上的数据
  3. // 父组件
  4. this.$children[0].s_msg // 读取子组件上的数据，在 mounted 函数中可以读取到，在 created 函数中 读取不到，因为 组件还未挂载到页面，同样的，直接在页面中 使用 插值表达式 读取 子组件的 数据 也是 读取不到的

3、provide+inject

参考：
vue 数据传递 - provide 与 inject
vue组件通信传值的几大方法及组件通信provide/inject的使用
示例：

  1. // 父组件
  2. export default {
  3.   provide: {
  4.     // 提供值
  5.     message: 'hello Vue!',
  6.   },
  7.   // 或者 需要传入对象的时候
  8.   // provide() {
  9.   //   return {
  10.   //     testMsg: 'this is a test!'
  11.   //   }
  12.   // },
  13. }
  14. // 子组件
  15. //inject 注入接收后， 子组件中 可以使用 插值 表达式 调用 {{message}}
  16. export default {
  17.   name: 'child',
  18.   data() {},
  19.   inject: ['message'], // 使用值
  20. }

4、$attrs + $listeners

  1. // 多层组件 三级组件中 使用 $attrs
  2. <Chlidred :name="name" :age="age"/>
  3. <GrandChild v-bind="$attrs" />
  4. /**
  5. $attrs 相当于 子组件中接收到所有属性，直接传递给二级子组件
  6. */

5、ref 获取子组件节点，在父组件中通过属性的方式访问子组件上的属性

父子组件传递方法

  1. <!-- 调用父组件传递的方法 -->
  2. <!-- 在子组件调用的时候，通过事件绑定的方式，将父组件的方法传递给子组件 -->
  3. <comp @parent-fn="show"></comp>
  4. <!-- 在接受的时候，数据名如果是使用的驼峰语法，那在组件引用的时候必须使用肉串语法 -->
  5. // 后来使用的时候，发现 命名和调用规则： 肉串-肉串 驼峰-驼峰
  1. // 父组件的方法
  2. methos: {
  3.     show(p1, p2){
  4.         console.log('调用了父组件上的show方法')
  5.     }
  6. }
  7. // 子组件 需要 使用 props 属性接受，父组件传来的数据
  8. components: {
  9.     comp: {
  10.         data(){
  11.             // data 上的数据，是属于子组件自己的，可读可写
  12.             return {
  13.             },
  14.             // 接收 父组件传值，可读不可写
  15.             props: ['parentMsg']
  16.             template: `
  17.             <input type="button" value="子组件按钮-调用自己的方法" @click="myclick">
  18.             <input type="button" value="子组件按钮-调用父组件上的方法" @click="pclick">
  19.             `,
  20.             methos:{
  21.                 myclick(){
  22.                     console.log('子组件自己的方法')
  23.                 }
  24.                 pclick(){
  25.                     // 接收方法的时候，命名全都采用肉串语法，或者全部小写，不要 肉串和驼峰 混用
  26.                     this.$emit('parent-fn', p1, p2) // 函数名后面，都是需要传入的参数
  27.                 }
  28.             }
  29.         }
  30.     }
  31. }