要求：将输入框的内容显示在列表框，并点击列表删除

父向子传值：props:[]

子向父传值：this.$emit()

<div id='root'>

       <input v-model="inputValue"/>

      <button @click='handleSubmit'>提交</button>//点击按钮将输入框内容作为li显示

　　<ul>

　　　　<todo-item

　　　　　　v-for='(item,index) of list'

　　　　　　:content='item'//将item作为属性传递给子组件todo-item 

　　　　　　:index='index'//将index作为属性传递给子组件todo-item 

　　　　　　@delete='handleDelete'//监听子组件传递过来的delete事件名

　　　　>

　　　　</todo-item>

　　</ul>

</div>

<script>

//定义组件（全局组件）

Vue.component('todo-item',{

　　props:['content','index'],//接收传递过来的属性

　　template:'<li @click="handleClick">{

{content}}</li>',

　　methods:{

　　　　handleClick:function(){

　　　　　　this.$emit('delete',this.index)//将delete事件名及index属性传递给父组件

　　}

　　}

})

new Vue({

　　el:'#root',

　　data:{

　　inputValue:'',

　　list:[]

　　},

　　methods:{

　　　　handleSubmit:function(){

　　　　　　this.list.push(this.inputValue)

　　　　　　this.inputValue=''//清空输入框

　　　　},

　　　　handleDelete:function(index){

　　　　this.list.splice(index,1);

　　　　}

　　}

})

</script>

 

兄弟间传值

根据路径来传递及接收参数

在method里添加点击事件跳转的方法

使用this.$router.push({path:'/',query:{参数名：“参数值”}})，在接收页通过this.$router.query.参数名来获取参数

goPay(index, sid) {  this.$router.push({    path: '/payment',    query: {      tit: index,      price: this.cost[index].price,      sid: sid,    }  });