初识Vue-cli

时间:2019-10-22
本文章向大家介绍初识Vue-cli,主要包括初识Vue-cli使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

先说下下面代码中用到几个知识点

1.props 

        父组件通过props讲数据传递给子组件。

<!--父组件-->
<template>
  <div>
    <ul>
      <todo-item v-for="(item,index) in list" :content="item" :index="index" ></todo-item>
    </ul>

  </div>
</template>
<!--子组件 通过props接受父组件传递的数据-->
<script>
export default { props:['content','index'], methods:{ Delete(){ this.$emit('delete1',this.index) } } } </script>

2.$emit()

    子组件通过$emit触发父组件自定义事件

<!--子组件 触发click事件后,会自动触发delete1-->
<template>
<li @click="Delete">{{content}}</li>
</template>
<script>
export default 
  methods:{
    Delete(){
   this.$emit('delete1',this.index)
    }
  }
}
</script>
<!--父组件 当子组件 触发click事件后,会自动触发自定义delete1事件-->
<template>
  <div>
    <ul>
      <todo-item @delete1="handledete"></todo-item>
    </ul>

  </div>
</template>

All code:

<!--父组件-->
<template>
  <div>
  <div>
    <input v-model="inputVuale"/>
    <button v-on:click="handleSubmit">提交</button>
  </div>
    <ul>
      <todo-item v-for="(item,index) in list" :content="item" :index="index" @delete1="handledete"></todo-item>
    </ul>

  </div>
</template>

<script>
import TodoItem from './components/TodoItem'
export default {
  components:{
    'todo-item':TodoItem
  },
  data(){
    return{
      inputVuale:'',
      list:[]
    }
  },
  methods:{
    handleSubmit(){
      this.list.push(this.inputVuale)
      this.inputVuale=''
    },
    handledete(index){
      this.list.splice(index,1)
    }
  }
}
</script>

<style>

</style>
<!--子组件-->
<template>
<li @click="Delete">{{content}}</li>
</template>

<script>
export default {
  props:['content','index'],
  methods:{
    Delete(){
   this.$emit('delete1',this.index)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
//main.js
import Vue from 'vue'
import Todolist from './Todolist'

Vue.config.productionTip = false
new Vue({
  el: '#app',
  components: { Todolist },
  template: '<Todolist/>'
})

原文地址:https://www.cnblogs.com/topsyuan/p/11722410.html