创建alert组件(父子组件传值)

构建一个alert组件需要有几个操作
  1.父组件将alert内容传到组件
  2.父组件事件触发让alert组件显示出来
  3.点击alert组件,触发负组件的关闭事件,让alert组件消失

本身的业务逻辑比较简单,涉及到一个父子组件的相互传值。

上代码。先看父组件。

<template>
  <div id="home" class="testDiv">
    <Alert v-if="ifAlert" :alertText=' alertText ' @doAlert="doAlert"></Alert>
    aaaaaaaaaaa
    <div id="aaa" @click="alert">
      dianwodianwo
    </div>
  </div>
</template>
<style lang="less">
  @import url('../../assets/css/main.less');
</style>
<script>
  import Alert from '../../components/common/alert.vue'
export default{
  name:'home',
  components:{
      Alert
  },
  data(){
      return{
        ifAlert:false,
        alertText:'弹出弹出'
      }
  },
  methods:{
        alert(){
          this.ifAlert=true;
        },
        doAlert(){
          this.ifAlert=false;
        }
  }
}

</script>
然后是子组件的

<template>
  <div class="alert_container">
    <section class="tip_text_container">
      <p class="tip_text">{{ alertText }}</p>
      <div class="confirm" @click="closeTip">确认</div>
    </section>
  </div>
</template>
<script>
  export default{
    data(){
        return{
            positionY:0,
            timer:null
        }
    },
    mounted(){

    },
    props:['alertText'],
    methods:{
        closeTip(){
              //this.$emit('closeTip')
          alert(1)
          this.$emit('doAlert')
        }
    }
  }
</script>
这里,父组件通过props将值传到子组件,子组件通过$emit 触发父组件的doAlert事件,关闭alert组件。







随机浏览