vue 实现父子组件通信

Posted 2022-05-03 隔壁小王66

vue父子组件传递参数

父组件向子组件传参

组件注册

1:全局注册，在入口main.js中

Import [组件名] from [组件路径]
Vue. component(‘[组件名]’，组件名)

例如：

	import Toast from '../../../../src/common/com/com-toast/com-toast.vue';
	Vue.component('Toast', Toast);

2:局部注册，在页面js中

import ComponentA from './ComponentA.vue'

export default 
  components: 
    ComponentA
  ,

言归正传，父组件向子组件传值，通过在子组件设置props，来规定父组件传递给你想要的值

描述一下props

1. 传递静态值
2. 传递动态值

<blog-post title="传递静态值"></blog-post>

传递动态值，通过v-bind：或者：title

<blog-post v-bind:title="post.title"></blog-post>

能够传值的类型

• 数字
• 布尔
• 数组
• 对象
• 字符串
• 对象的所以属性

使用v-bind表示传递的js表达式42，而不是字符串42

<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

如果传递字符串

<blog-post likes="42"></blog-post>

静态布尔

<blog-post v-bind:is-published="false"></blog-post>

如果是字符串

<blog-post is-published="false"></blog-post>

传入一个对象的所有 property

在data中定义对象

data() 
    return 
      demo: 
        a: 1,
        b: "2",
        c: true
      
    ;
  ,

<blog-post v-bind:demo="demo"></blog-post>

单向数据流

简单解释就是 数据从父组件流向子组件，父组件prop数据更新会流向子组件，反之则不行

另外一个就是子组件的props中的值受父组件影响更新，但是子组件不应该去操作这个值的更新，不是不能，是不应该，操作是可以操作，控制台会报错而已，但是不影响运行

比如：一个弹窗组件，父组件设置visible，子组件点击事件.self改变visible也是可以的，这个逻辑比较常见

子组件接收父组件传值，并使用

父组件传递过来的值，子组件作为本地变量使用，最好定义一个本地的 data property 并将这个 prop 用作其初始值

例如：在data中定义变量，接收传递过来值

data() 
    return 
      a:this.aaa,
    ;
  ,
  props: ['aaa']

或者需要对值做转换，可以在computed中做处理，computed会监听属性值，在更新的时候调用更新，而且具备缓存，在数据未更新的时候并不执行，区别于method

	props: ['aaa'],
	computed:
    prop()
      return this.aaa+'aaa'
    ,
  ,

props验证

这是项目中的通常写法

定义props，定义属性，属性定义type，defalut，validator，required
等，分别解释为数据类型，默认数据，数据校验，是否必传等，不做详述

举例

props: 
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: 
      type: String,
      required: true
    ,
    // 带有默认值的数字
    propD: 
      type: Number,
      default: 100
    ,
    // 带有默认值的对象
    propE: 
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () 
        return  message: 'hello' 
      
    ,
    // 自定义验证函数
    propF: 
      validator: function (value) 
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      
    
  

这是vue文档中的例子，看的很明白，在举一个项目中的例子

props: 
    /**
     * @desc secs 倒计时时间
     */
    secs: 
      type: Number,
      default: 60
    ,
    /**
     * @desc 初始化展示文字
     */
    firstStr: 
      type: String,
      default: '获取验证码'
    ,
    /**
     * @desc 运行时按钮文字
     */
    runStr: 
      type: String,
      default: '%s'
    ,
    /**
     * @desc 倒计时结束后展示文字
     */
    resetStr: 
      type: String,
      default: '重新获取验证码'
    

这样父组件向子组件传值就结束了

子组件向父组件传值

在子组件中定义 $emit

例如子组件 的方法中

	med()
      this.$emit("属性名","要传递的数据")
    

在父组件中

<blog-post @属性名="方法名（close）"></blog-post>

在methods中定义方法

close(val)
   //val代表传过来的值