vue 动态添加active+父子传值

template:

<ul class="nav nav-pills">
<li role="presentation" v-for="(elm,index) in names" @click="getactive(index)" :key="index" :class="{active:ins==index}"><a href="#">{{elm}}</a></li>
</ul>

script:
data() {
return {
ins:-1,
names:['HOME','HOME1','HOME2']
}
},
methods: {
//获得index
getactive(index){
this.ins=index;
}
},

父--》子传值(在created函数中挂载到vue对象中)
1.父组件:在data中定义属性,在引用的子组件中使用v-bind:key=value,
2.子组件:子组件中声明props:['key']数组,子组件中使用父组件定义的key
3.{{key}}使用即可

子--》父组件
1.子组件需要声明一个事件,在事件中this.$emit('func', this.names) // ('函数名字',传递的value)
2.父组件中需要在<HelloWorld :apptohello="app_msg" @func="getmsg"></HelloWorld>
3.通过绑定的func即getmsg,拿到子组件中的value //getmsg(value){} value即子组件中的值
posted @ 2019-09-16 11:01  烧刘病  阅读(747)  评论(0编辑  收藏  举报
回到页首