vue子组件和父组件之间动态传参交互

vue子组件和父组件动态交互

       组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

 

一、父子组件传参数是通过属性props来实现的，需要在子组件内定义一个属性来接收父组件传过来的值；父组件要做的是双向绑定一个参数、给参数赋值。

子组件：

1.要用brainstormData属性，此时属性是没有值的，父组件还没给它传值。

2.定义属性：brainstormData，写上类型：Array

父组件：

1.引入、注册组件：

2.为组件双向绑定属性，属性的值为一个参数，通过给参数赋值来实现为绑定的属性传值

3.在Data(){}中定义要用到的参数

4.为joinBrains赋值，值为从后端接收到的数据

二、父子组件传函数是通过$emit实现的，当子组件的方法需要在被引用后扩展的时候，$emit就发挥了作用。子组件需要用$emit来接收父组件传进来的方法，父组件要写具体的此方法步骤。

子组件：

1.点击触发方法，参数是父组件传过来的值

2.在methods里定义方法，方法内容是用$emit接收父组件传来的方法

父组件：

1.省略引入组件

2.@子组件的方法名，用来和子组件绑定，绑定的值为父组件中要具体去执行的方法的方法名

3.方法具体要做的是带着参数跳转页面

  三、单向数据流
  父级的prop数据的更新，会向下流动到子组件中，反过来不行
  父组件能够修改子组件中的数据，而子组件不能直接修改父组件中的数据
  作用：
      防止子组件意外变更状态，会影响父组件中的状态或者数据

以下是具体的实例

1）父组件向子组件传参
      父组件使用prop属性，向子组件传参
      <div id="app">"
        <my-com :title="title" msg="hello"></my-com>
      </div>
      
      动态传参
        没有：传递的常量字符串
        有：  传递boolean、number、对象、数组、变量

      子组件接受参数
      let component = {
        props: ['title','msg'],
      }

      props校验
      let component = {
        props: {
          title: {
            type: String,     // 验证数据类型
            required: true,   // 该参数必需传递的参数
            // 基本数据类型直接写在default后面
            default: '你好',  //  当前参数的默认值
            // 引用数据类型,使用工厂函数的形式返回一个对象或者数组
            default() {
              return { }
            }
            validator(val) {  // 自定义的验证器
              return val.length > 3
            }
          }
        },
      }
    2）子组件向父组件传参
      <div id="app">"
        <my-com @son-handler="fatherHandler" msg="hello"></my-com>
      </div>

      let component = {
        data() {
          return {
            comMsg: '我是子组件数据'
          }
        },
        template:`
          <div>
            <button @click='clickHandler'>发送事件</button>
          </div>
        `,
        methods: {
          clickHandler() {
            this.$emit('son-handler', this.comMsg)
          }
        }
      }

      new Vue({
        el:'#app',
        data: {
          fatherDate: ''
        },
        methods: {
          fatherHandler(val) {
            // val就是子组件发送事件时，携带的参数this.comMsg
            this.fatherDate = val
          }
        },
        components: {
          myCom: component
        }
      })