码迷,mamicode.com
首页 > 其他好文 > 详细

组件之间的传值 子传父

时间:2019-10-06 18:46:02      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:隐藏和显示   component   ret   操作   console   methods   button   isp   面试题   

 

01===》子传父 使用函数的方式 接受
zi.vue
<template>
    <div>
        子组件:
        <span>hha</span>
        <button @click="clickBtn"> 点我传递给父亲 </button>
        </div>
</template>

export default {
    data(){
        return{
          msg:"儿子数据 传递给父亲"
        }
    },

    methods: {
        clickBtn(){
           this.$emit("getval",this.msg) //触发自定义事件 参数1:自定义事件的名称 参数2:要传递的参数
        } 
    },
}



fu.vue
ps=====>在自定义组件上, 绑定的所有事件句柄(不管是静态 还是动态)都是自定义事件 不会自动触发 需要手动触发
<template>
    <div>
       父组件: 
       <child @getval="getzivalue"></child> 
    </div>
</template>


<script>
import child from "../zi/zi"
export default {
    components: {
      child
    },
    data () {
        return {

        }
    },

    methods:{
      getzivalue(mess){
         console.log("儿子传递过来的参数"+mess) //输出 “儿子数据 传递给父亲”
       }
    }
}
</script>

 

01====》面试题
1. v-if和v-show的区别?
v-if使用的是节点操作,removeChild或者appendChild
v-show使用的是css的dispaly来进行隐藏和显示

2. props和data的区别?
data是组件内部数据,由组件自己创建,自己维护
props是外部数据,由外部创建传入,由外部维护!

组件之间的传值 子传父

标签:隐藏和显示   component   ret   操作   console   methods   button   isp   面试题   

原文地址:https://www.cnblogs.com/IwishIcould/p/11627796.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!