组件间的传参

1.父传子

父组件向子组件传递属性，子组件通过props配置项进行接受。

//父组件：

<template>
  <div class="parent">
    <p>父组件：{{ msg }}</p>
    <Child message="Hello, I am parent!"></Child>
  </div>
</template>
 
<script>
  import Child from './Child'
  export default {
    name: 'Parent',
    data () {
      return {
        msg: 'Hello world'
      }
    }，
    components:{
          Child
     }
  }
</script>

//子组件：

<template>
  <div class="child">
    //使用父组件传递过来的参数
    <p>子组件：{{ message }}</p>
  </div>
</template>
 
<script>
  export default {
    name: 'Child',
    //使用props配置项接受参数
    props: ['message'],
    data () {
      return {}
    }
  }
</script>

2.子传父

子组件向父组件传参数，通过调用父亲传递过来的方法传递参数。

//父组件：

<template>
    <div>
        <div>父组件的{{name}}</div>
        <Child @showName="updateName" :sendData="name"></Child>
    </div>
<template>
<script>
  import Child from "./child;
  export default {
    components: {Child},
    data () {
      return {
        name:SXK
      }
    },
    methods:{
      updateName(data){//触发子组件修改名字的事件
        this.name = data.name;//改变了父组件的值
      }
    }
  }
</script>

//子组件：

<template>
  <div>
    <button @click='update(`XC`)'>点击此处将‘XC’发送给父组件</button>
  </div>
</template>
<script>
  export default {
    props:['sendData'], // 用来接收父组件传给子组件的数据
    methods:{
      update(val) {
        let data = {
         name: val
        };
        this.$emit('showCityName',data);//update事件触发后，自动触发showName事件
      }
    }
  }
</script>