vue阻止事件冒泡、父子组件传值、vue动画、回车键调用方法、vue切换光标

本文介绍了Vue.js中如何阻止事件冒泡，通过`.stop`修饰符实现。接着讲解了父子组件间的通信方式，包括父传子、子调父的方法。此外，还涉及到Vue的动画应用以及如何利用回车键触发方法，以及如何切换光标焦点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、阻止事件冒泡
需要阻止的容器添加@click.stop，如下，点击cliclTest这个方法，handleClose不会触发：

<div class="detailedInformation_box" @click="handleClose">
    <div class="content1_box" @click.stop>
      <div class="title_box" @clilc="cliclTest"> </div>
   </div>
 </div>

二、父子组件传值
1、父组件给子组件传值
父组件传值

<children :name="name"></children>
 子组件接收值
 props：{
   name：String、Object、Number
 }

2、父组件调用子组件的方法

  <children :name="name" ref="children"></children>
  this.$refs.children.子组件方法名

3、子组件调用父组件的方法
第一种： 首先将父组件的方法传给子组件

       <children :name="name" ref="children" @fatherMethod="test"></children> 
        <script>
	      import child from '~/components/dam/child';
	      export default {
	        components: {
	          child
	        },
	        methods: {
	          test() {
	            console.log('测试');
	          }
	        }
	      };
		</script>
 然后子组件调用
this.$emit('fatherMethod');

**第二种：**子组件直接调用

this.$parent.fatherMethod();

关于传值，还可参考这篇文章https://blog.csdn.net/zhongshijun521/article/details/80610971

三、vue动画
1、讲需要放入的动画的模块放入（y以下是简单的显示隐藏的过度动画）

 <transition name="fade">
            <div id="div1" v-show="isShow" transiton="fade"></div>
</transition>
//css加入以下代码
 .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
}
.fade-enter, .fade-leave-active {
      opacity: 0
}

4、回车键调用方法

@keyup.enter.native="axiosGetData()"

5、vue切换光标

this.$refs.mmRef.$el.querySelector("input").focus();
如果组件名字使用变量时
 this.$refs[mmRef][0].$el.querySelector("input").focus();