前端知识

[TOC]

# VUE常用语法

# 1. 子组件调用父组件方法

# 1.1 子组件使用this.$parent.event

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件：

<template>
  <child></child>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: { child },
    methods: {
      fatherMethod() { console.log('测试'); }
    }
  };
</script>

子组件：

<template>
  <button @click="childMethod()">点击</button>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

# 1.2 子组件使用$emit

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

$emit也可以在子组件的html中使用。

父组件：

<template>
  <child @fatherMethod="fatherMethod"></child>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: { child },
    methods: { fatherMethod() { console.log('测试'); } }
  };
</script>

子组件：


<template>
  <div>
    <button @click="childMethod()">点击</button>
    <button @click="$emit('fatherMethod')")>也可以直接在html中使用</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() { this.$emit('fatherMethod'); }
    }
  };
</script>

# 1.3 方法当属性传入子组件直接使用

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件：

<template>
  <child :fatherMethod="fatherMethod"></child>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: { child },
    methods: {
      fatherMethod() { console.log('测试'); }
    }
  };
</script>

子组件：

<template>
    <button @click="childMethod()">点击</button>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) { this.fatherMethod(); }
      }
    }
  };
</script>

# 2. 父组件调用子组件方法

父组件：

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: { child: Child },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

子组件：

<template>
  <div> child </div>
</template>
 
<script>
  export default {
    name: "child",
    methods: {
      parentHandleclick(e) { console.log(e) }
    }
  }
</script>

# 3. html中模板里面相关语法

# 3.1 v-for批量渲染

v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<template>
  <div>
    <li v-for="(item, index) in items" :key="item.message">
    	{{ parentMessage }} - {{ index }} - {{ item.message }}
  	</li>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    };
  }
};
</script>

# 3.2 条件渲染

根据表达式的值的真假来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  D
</div>

# 4. vue组件里面选项

<script>
  export default {
    // props 属性
    props: {
      fileName: {
        type: String,
        required: true
      },
    },
    // 组件自己的属性定义处
    data() {
      return { a:10 };
    },
    // 计算属性，当对应的属性变化时，aDouble也会实时变化
    computed: {
      aDouble: vm => vm.a * 2,
      // 读取和设置
      aPlus: {
        get: function () {
          return this.a + 1
        },
        set: function (v) {
          this.a = v - 1
        }
      }
    },
    // methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
    methods: {
      plus: function () { this.a++ }
    },
    // 侦听器:  一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。
    watch: {
      a: function (val, oldVal) {
        console.log('new: %s, old: %s', val, oldVal)
      },
    }
  };
</script>
Edit this page