作用域插槽
子組件插槽通過 ?:msgv='msg' 向scope傳值?
<template>
? ? <div>
? ? ? ? <slot name="one" :msgv='msg'></slot>
? ? ? ? <h1>DemoOne</h1>
? ? ? ? <slot name="two" :strv='str'></slot>
? ? </div>
</template>
<DemoOne>
? ? ?在vue2.6之前使用slot-scope?
? ? ?父組件使用slot-scope接收插槽傳過來的值
? ? slot-scope的方式 可以使用template也可以直接寫在元素上
? ? ? <h2 slot="one" slot-scope="scope">我是插槽1--{{ scope.msgv }}</h2>
? ? 在vue2.6之后出現(xiàn)了v-slot 在vue3就必須使用v-slot, v-slot只能寫在template上
? ? ? <!-- 使用v-slot的方式，
? ? ? ? ? ?1.必須使用在template里
? ? ? ? ? ?2.v-slot:插槽名='scope'，取代了slot=''
? ? ? ? ? ? ?匿名插槽插槽名不寫 -->
? ? ? <template v-slot:two="scope">
? ? ? ? <h2>我是插槽2--{{ scope.strv }}</h2>
? ? ? </template>
? ? </DemoOne>
父組件向子組件傳值 ，使用:list='list'的方式
<DemoTwo :list='list'>
? ? ? <template slot-scope="scope">? 匿名插槽
插槽接收到下面?zhèn)鱽碇担湃朦c(diǎn)擊函數(shù)handler里
? ? ? ? <a href="javascript:;" @click="handler(scope.row)">查看詳情</a>
? ? ? </template>
? ? </DemoTwo>
? 子組件通過props:['list']接收父組件傳來的值
<template>
? <div>
? ? <h1>我是DemoTwo</h1>
? ? <ul>
? ? ? ?<li v-for="(v,i) in list" :key="i">{{v.name}}--{{v.age}}
插槽把每一項(xiàng)的值v通過:row給escope
? ? ? ? ? ?<slot :row='v'></slot>
? ? ? ?</li>
? ? </ul>
? </div>
</template>
<script>
Vuex
在store的index.js文件中
/* 吧vuex當(dāng)作一個(gè)方法，用vue.use來引入 */
Vue.use(Vuex)
/* Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。 */
export default new Vuex.Store({
? state: {/* 存儲(chǔ)組件中數(shù)據(jù) */
? ? msg: '組件共享的數(shù)據(jù)',num:0
? },
? getters: {/* 計(jì)算組件中數(shù)據(jù)，可以對(duì)其二次加工，類似computed */
? },
? mutations: {/* 修改state中的值(要想留下記錄必須使用mutations修改)? */
? ? ? ? ? ? ? ? ? ? ? ? ? ?方法名用大寫
? ADDNUM:function(state){
? ? console.log('ADDNUM',state);
? ? state.num++
? },
? DELNUM:function(state){
? ? console.log("DELNUM",state);
? ? state.num--
? }
? },
? actions: {/* 調(diào)后臺(tái)接口并commit提交一個(gè)mutations
? ? ? ? ? ? ? ?里面的方法用小寫為了區(qū)分mutations里面的方法*/
? },
? modules: {/* 可以使用modules把vuex分模塊 */
? }
})
組件中可以通過$store.state.數(shù)據(jù)名獲取state中的數(shù)據(jù),并且通過 this.$store.commit('方法名')來觸發(fā)? mutations中的方法
<h1>主頁--{{$store.state.msg}}--{{$store.state.num}}</h1>
? ? <button @click="add">加1</button> |
? ? <button @click="del">減1</button>
methods:{
? ? add(){
? ? ? this.$store.commit('ADDNUM')
? ? },
? ? del(){
? ? ? this.$store.commit('DELNUM')
? ? }
? }
