作用域插槽
子組件插槽通過 ?: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之后出現了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">? 匿名插槽
插槽接收到下面傳來值，放入點擊函數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}}
插槽把每一項的值v通過:row給escope
? ? ? ? ? ?<slot :row='v'></slot>
? ? ? ?</li>
? ? </ul>
? </div>
</template>
<script>
Vuex
在store的index.js文件中
/* 吧vuex當作一個方法，用vue.use來引入 */
Vue.use(Vuex)
/* Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式 + 庫。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。 */
export default new Vuex.Store({
? state: {/* 存儲組件中數據 */
? ? msg: '組件共享的數據',num:0
? },
? getters: {/* 計算組件中數據，可以對其二次加工，類似computed */
? },
? mutations: {/* 修改state中的值(要想留下記錄必須使用mutations修改)? */
? ? ? ? ? ? ? ? ? ? ? ? ? ?方法名用大寫
? ADDNUM:function(state){
? ? console.log('ADDNUM',state);
? ? state.num++
? },
? DELNUM:function(state){
? ? console.log("DELNUM",state);
? ? state.num--
? }
? },
? actions: {/* 調后臺接口并commit提交一個mutations
? ? ? ? ? ? ? ?里面的方法用小寫為了區分mutations里面的方法*/
? },
? modules: {/* 可以使用modules把vuex分模塊 */
? }
})
組件中可以通過$store.state.數據名獲取state中的數據,并且通過 this.$store.commit('方法名')來觸發? 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')
? ? }
? }
