Vue父子组件数据和方法的传递

作者: 埃的骚几里 | 来源:发表于2018-12-16 16:26 被阅读0次

Vue父子组件之间的传递数据和方法调用

概述

在一个良好定义的接口中尽可能将父子组件解耦是很重要的，因此组件实例的作用域必须是独立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据，也不能在父组件的模板中直接使用子组件的数据，否则会增强组件之间的耦合性，使得组件不利于维护和管理。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

image

Vue组件选项props-父组件向子组件传递数据

1.静态props

子组件要显式地用 props 选项声明它期待获得的数据

const childNode = {
  template: '<div>{{message}}</div>',
  props:['message']//子组件要显式地用 props 选项声明它期待获得的数据
}

静态props通过为子组件在父组件中的 占位符添加特性的方式 来达到传值的目的

<div id="example">
  <parent></parent>
</div>

<script>
const childNode = {
  template: '<div>{{message}}</div>',
  props:['message']
}
const parentNode = {
  template: `
  <div class="parent">
    <child message="aaa"></child>
    <child message="bbb"></child>
  </div>`,
  components: {
    childNode
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    parentNode
  }
})
</script>

2.命名规定

对于props声明的属性来说，在父级HTML模板中，属性名一般需要使用中划线写法，子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级HTML模板使用从父级传来的变量时，需要使用对应的小驼峰写法

const parentNode = {
  template: `
  <div class="parent">
    <child my-message="aaa"></child>//父级HTML模板中，属性名一般使用中划线写法
    <child my-message="bbb"></child>
  </div>`,
  components: {
    childNode
  }
};
const childNode = {
  template: '<div>{{myMessage}}</div>',//子级HTML模板使用从父级传来的变量时，需要使用对应的小驼峰写法
  props:['myMessage']//子级props属性声明时，使用小驼峰
  //props:['my-message']//子级props属性声明时，中划线
}

3.动态props

在模板中，要动态地绑定父组件的数据（父组件data里面的变量）到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind（简写:）。每当父组件的数据变化时，该变化也会传导给子组件

const childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['myMessage']
}

const parentNode = {
  template: `
  <div class="parent">
    <child :my-message="data1"></child>
    <child :my-message="data2"></child>
  </div>`,
  components: {
    childNode
  },
  data(){
    return {
      'data1':'aaa',
      'data2':'bbb'
    }
  }
};

思考：如何传递一个number类型的数字(1.:message='1',2:message='num' num:1,静态props默认传递的是字符串类型)

4.props验证

可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue会发出警告。当组件给其他人使用时，这很有用，要指定验证规格，props需要用对象的形式，而不能用上述的字符串数组了。

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    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 value > 10
     }
    }
   }
 })

type可验证：String、Number、Boolean、Function、Object、Array、Symbol

type 也可以是一个自定义构造器函数，使用 instanceof 检测

propSomeProperty:{
    type(value){
        return value instanceof Person
    }
}

当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在函数验证里，组件还没创建，诸如 data、computed 或 methods 等实例属性还无法使用。

5.单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告。

<div id="example">
  <parent></parent>
</div>

<script>
var childNode = {
  template: `
    <div class="child">
        <div>
            <span>子组件数据</span>
            <input v-model="childMsg">
        </div>
        <p>{{childMsg}}</p>
    </div>
  `,
  props:['childMsg']
}
var parentNode = {
  template: `
    <div class="parent">
        <div>
            <span>父组件数据</span>
            <input v-model="msg">
        </div>
        <p>{{msg}}</p>
        <child :child-msg="msg"></child>
    </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
        'msg':'match'
    }
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>

父组件数据变化时，传递给子组件的数据会相应变化；而子组件改变父组件传递的数据时，父组件数据不变，并在控制台显示警告

6.修改prop数据

修改prop中的数据，通常有以下两种原因

prop 作为初始值传入后，子组件想把它当作局部数据来用
prop 作为初始值传入，由子组件处理成其它数据输出

[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态.

对于这两种情况，正确的应对方式是

1、子组件定义一个局部变量，并用 prop 的值初始化它

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

示例代码：

<div id="example">
  <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>

var childNode = {
  template: `
      <div class="child">
        <div>
          <span>子组件数据</span>
          <input v-model="temp">
        </div>
        <p>{{temp}}</p>
      </div>
  `,
  props:['childMsg'],
  data(){
    return{
      temp:this.childMsg
    }
  },
};

var parentNode = {
  template: `
      <div class="parent">
        <div>
          <span>父组件数据</span>
          <input v-model="msg">
        </div>
        <p>{{msg}}</p>
        <child :child-msg="msg"></child>
      </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
        'msg':'match'
    }
  }
};
// 创建根实例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>

缺点：父组件数据发生变化是，子组件无法实时更新到

2、定义一个计算属性，处理 prop 的值并返回

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size；
  }
}

但是，由于是计算属性，则只能显示值，设置值相对麻烦，也可以做到(set,get)

props: ['size'],
computed: {
  normalizedSize:{
    get(){
        return this.size；
    },
    set(value){
        this.size = value
    }
  } 
}

3.利用watch监听

<div id="example">
  <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
    var childNode = {
      template: `
          <div class="child">
            <div>
              <span>子组件数据</span>
              <input v-model="temp">
            </div>
            <p>{{temp}}</p>
          </div>
      `,
      props:['childMsg'],
      data(){
        return{
          temp:this.childMsg
        }
      },
      watch:{
        childMsg(){
          this.temp = this.childMsg
        }
      }
    };
    var parentNode = {
      template: `
          <div class="parent">
            <div>
              <span>父组件数据</span>
              <input v-model="msg">
            </div>
            <p>{{msg}}</p>
            <child :child-msg="msg"></child>
          </div>
      `,
      components: {
        'child': childNode
      },
      data(){
        return {
          'msg':'match'
        }
      }
    };
    // 创建根实例
    new Vue({
      el: '#example',
      components: {
        'parent': parentNode
      }
    })
</script>

子组件调用父组件的方法

1.直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '@/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      //父组件方法
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod">点击可调用父组件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

2.在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了(常用)

父组件

<template>
  <div>
    <!-- fatherMethod:出发父组件方法的命名规定 --!>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(params) {
        //params：父组件接受子组件传来的参数
        console.log(params);
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        //params：子组件传递给父组件的参数
        //fatherMethod：子组件触发父组件方法的命名规定
        this.$emit('fatherMethod',params);
      }
    }
  };
</script>

注意：这种方法也是子组件传递数据给父组件的方式

3.父组件把方法传入子组件中，在子组件里直接调用这个方法（利用子组件的props属性）

//子组件
const Child = {
    props:{
      parentMethod:{
          type:Function,
          default:null
      }
    },
    template:`
        <div>
            <button @click="parentMethod">调用父组件方法</button>
        </div>
    `,
    mounted(){
      console.log(this.parentMethod);
    }
};
//父组件
const Parent = {
    components:{
        Child
    },
    template:`
        <div>
            <child :parentMethod="alertSomeData"></child>
        </div>
    `,
    methods:{
        alertSomeData(){
            alert('我是父组件方法');
        }
    }
};
new Vue({
    el:'#app',
    components:{
        Parent
    },
    template:'<Parent />'
})

子组件传递数据给父组件

子组件相关逻辑触发式，利用this.$emit('触发父组件方法的标价',传递给父组件的数据)

//子组件
const Child = {
    template:`
        <div>
            <button @click="emitChildData">传递子组件数据给父组件</button>
        </div>
    `,
    data(){
        return{
            childMsg:'我是子组件数据'
        }
    },
    methods:{
        //子组件传递数据给父组件
        emitChildData(){
            this.$emit('emitDataToParent',this.childMsg);
        }
    }
};
//父组件
const Parent = {
    components:{
        Child
    },
    template:`
        <div>
            <child @emitDataToParent="getDataFromChild"></child>
            <span v-text="getFromChild"></span>
        </div>
    `,
    data(){
        return{
            getFromChild:''
        }
    },
    methods:{
        getDataFromChild(getData){
            console.log(getData);
            this.getFromChild = getData;
        }
    }
};
//入口组件
const App ={
    components:{
        Parent
    },
    template: `
       <div>
          <parent></parent>
       </div>
     `
};
//根组件
new Vue({
    el:document.getElementById('app'),
    components:{
        App,
    },
    template:'<App />'
})

父组件调用子组件方法

子组件html用ref属性标记，父组件利用this.$refs.xxx.childMethods

//子组件
const Child = {
    template:`
        <div>
            我是子组件
        </div>
    `,
    methods:{
        //子组件方法
        childMethod(){
            alert('我是子组件方法');
        }
    }
};
//父组件
const Parent = {
    components:{
        Child
    },
    template:`
        <div>
            <child ref="getChildMethods"></child>
            <button @click="emitChildMethod">父组件调用子组件方法</button>
        </div>
    `,
    methods:{
        emitChildMethod(){
            //父组件调用子组件方法
            this.$refs.getChildMethods.childMethod();
        }

    }
};
//入口组件
const App ={
    components:{
        Parent
    },
    template: `
       <div>
          <parent></parent>
       </div>
     `
};
//根组件
new Vue({
    el:document.getElementById('app'),
    components:{
        App,
    },
    template:'<App />'
})