Vue父组件向子组件传参

父组件传参给子组件：

 

1.在父组件data中定义要传给子组件的参数

  data () {
    return {
      fathermsg: '100000086666'
    };
  }

2.在父组件中调用子组件，并在components中注册

import zizuj1 from '../component/zizujian1';

export default {
  components: {
    zizuj1
  }

3.在父组件中引用子组件，把父组件的值绑定给子组件(msgFromfather1可以写为msg-fromfather1)

<zizuj1 :msgFromfather1="fathermsg" msgFromfather2="父传子的参数"></zizuj1>

4.在子组件props定义接收的参数名

<template>
  <div>
    <p>{{msgFromfather1}}</p>
    <p>{{msgFromfather2}}</p>
  </div>
</template>
<script>
export default {
  name: 'zizujoo',
  props: [
    'msgFromfather1',
    'msgFromfather2'
  ],
  mounted () {
    console.log(this.msgFromfather1);
    console.log(this.msgFromfather2);
  }
};
</script>

整理一遍流程：

1.在父组件data中定义要传给子组件的参数

2.在父组件中调用子组件，并在components中注册

3.在父组件中引用子组件，把父组件的值绑定给子组件(msgFromfather1可以写为msg-fromfather1)

4.在子组件props定义接收的参数名