vue 動態添加active+父子傳值

template:vue

<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']數組,子組件中使用父組件定義的key3.{{key}}使用便可子--》父組件1.子組件須要聲明一個事件,在事件中this.$emit('func', this.names) // ('函數名字',傳遞的value)2.父組件中須要在<HelloWorld :apptohello="app_msg" @func="getmsg"></HelloWorld>3.經過綁定的func即getmsg,拿到子組件中的value    //getmsg(value){} value即子組件中的值
相關文章
相關標籤/搜索