VUE之组件

最新推荐文章于 2024-05-21 10:17:20 发布

原创最新推荐文章于 2024-05-21 10:17:20 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

8 篇文章

订阅专栏

一.父组件将内容传递给子组件：prop

Parent.vue

<child msg = 'parent'></child>

Child.vue

<div>
	{{msg}}
</div>


<script>
export default {
  name: 'Child',
  prop:['msg']
}

</script>

二.子组件将信息传递到父组件:$emit

子组件：

<template>
  <div class="train-city">
  <!--调用父组件中子组件标签内的showCityName方法-->
    <br/><button @click='$emit('showCityName',{city:'北京'});'>点击此处将‘大连’发射给父组件</button>
  </div>
</template>
<script>
  export default {
    name:'TrainCity',
  }
</script>

父组件：

<template>
    <div>
        <div>父组件的toCity{{toCity}}</div>
        <!--子组件通过emit来调用showcityname方法，其又调用了父组件的updateCity方法-->
        <train-city @showCityName="updateCity" ></train-city>
    </div>
<template>
<script>
  import TrainCity from "./train-city";
  export default {
    name:'index',
    components: {TrainCity},
    data () {
      return {
        toCity:"北京"
      }
    },
    methods:{
    	//这个方法的第一个参数data就是从子组件传过来的{city: '北京'}
      updateCity(data){
        this.toCity = data.city;
        console.log('toCity:'+this.toCity)
      }
    }
  }
</script>