Vue 语法中使用的 注意事项

• 在DOM中 可能存在 点击触发子元素事件，父元素事件也跟着响应了 （这叫 事件穿透 ）
  阻止事件穿透的方式就是 @click.stop

<div @click="父亲事件">
    <div @click.stop>
        <div @click="儿子1事件"></div>
        <div @click="儿子2事件"></div>
        <div @click="儿子3事件"></div>
    </div>
</div>

可以使用上面这种方式 来完成 阻止事件穿透
在儿子上层增加一个包括容器，可阻止多个儿子向上冒泡事件

• 自定组件 不能直接添加 @Click事件 这样是无法响应的

<custom-item ref='custom' @click.native='这样添加.native后才有效果'>/<custom-item>

• 在Vue 中使用v-for 和v-if 的使用

v-for 和v-if 我么有时候会有一起使用的需求
在Vue中 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中 这样 将造成不必要的计算，影响性能 官方给出的解决方案是不要在同一节点中去执行渲染

<template v-if="dataList.length">
          <el-carousel-item v-for="(item, index) in dataList" :key="index">
            <img width="100%" :src="item.cover_img" alt="" />
          </el-carousel-item>
</template>

或者是 使用computed计算属性 事先处理好数组 再次渲染 去规避 一起使用

• Vue 父组件如何操作 子组件中的事件方法

在父组件中的DOM 中调用调用子组件 在组件上设置 ref="keyname"
在js 中直接 this.$refs.keyname 就可以访问到子组件对象

html部分
<div> 
    <custom-item ref='custom'>/<custom-item>
</div>

js部分
<script>
export default {
      methods:{
          demo() {
             console.log('我是父组件中的函数方法')
          }
      }
}
</script>

custom-item 假如内部有一个 isShowMask() { } 的函数
那么在当前页面就可以这么调用

 this.$refs.custom.isShowMask()

this.$refs.custom 其实就可以拿到 自定义子组件 custom-item 的对象 对象去调用自己的函数方法

• Vue 子组件中 访问父组件 的事件方法

在 custom-item 组件中访问  demo() 函数

<script>
  export default {
    methods: {
      childMethod() {
//调用父组件方法
        this.$parent.demo();
      }
    }
  };this
</script>

prevent 子访问父组件
root 子访问根组件Vue实例 中的函数

以上均是本人在学习使用中遇到的问题 ，希望可以帮助大家