vue3 值操作

1、传值

1.1、父传子【props】

//父组件
<router-view name="header" :total="total"></router-view>
src: '',  // setup里面申明

//子组件
import {defineComponent,watch, ref} from 'vue'
export default defineComponent({
	name: "Pagination",
	props: {
        total: Number,
        reload:{
            type: Function,
            default: null     //传递方法
        }
    },
})

<div  :total="total"></div>

1.2、子传父【emit】

//子组件
this.$emit('getMessage', “传给父组件的值”);
//或者
setup(props,ctx){
	const choose = (val)=>{
		console.log(val)
		ctx.emit('getMessage',val);
	}
}

//父组件
<router-view @getMessage="showMsg"></router-view>
showMsg (val) {   // methods方法  val即为子组件传过来的值
  console.log(val)
}

 1.3、父主动获取子组件的方法或数据

<son @click="getVal" ref="sonData"></son>  //在子组件上加上ref
<script lang="ts">
import {defineComponent, ref,toRaw} from 'vue'
setup() {
	const sonData = ref();
    console.log((sonData.value))     //这里为undefined,只是绑定了关系，需要触发后获取
    const getVal = ()=>{            //通过方法主动调用
        console.log(toRaw(sonData.value.elform))  //调用子组件的数据或方法
    }
	
	return {
		sonData,  //必须return否则获取不到
        getVal
	}
}
</script>

 1.4、父子双向绑定

//父组件
<MediaDialog :name="name" v-model:visible="dialogMediaVisible" />

//子组件
<el-dialog :model-value="visible"></el-dialog>  //使用model-value
//子组件获取model值
props: {
	modelValue: {
		type: String,
		default: ""
	},
},


// 数据双向绑定
emit('update:modelValue', e)

2、使用vueX

子组件数据双向绑定（非必须，这里只是示例）

<el-row justify="end">
	<el-pagination
			v-model:currentPage="currentPage"    
			v-model:page-size="pageSize"
			:page-sizes="[10, 20, 50,100]"
			background
			layout="total, sizes, prev, pager, next, slot"
			:total="total"
	>
	<!--使用 v-model 相当于传递了一个 modelValue 属性以及触发一个 update:modelValue 事件：-->            
	<!-- slot 只起占位作用 会在对应位置显示自定义内容 -->
	</el-pagination>
</el-row>

import {defineComponent,watch, ref} from 'vue'
setup( ) {
	const currentPage = ref(1)
	const pageSize = ref(10)
	const store  = useStore()            
	watch(currentPage,(a)=>{
		store.commit('setCurrentPage', a);
	})
	return {currentPage, pageSize}
},

1、配置 

1、安装vueX并且在store.ts或store/index.ts中 添加如下

state: {
	searchBar: false,                
},
mutations: {
	//同步修改 state
	setSearchBar: (state, payload) => {
		state.searchBar = payload
	}
},
actions: {
	//异步修改 state
	searchBar: ({commit}, payload) => {
		commit('setSearchBar', payload) //通过异步提交action方法
	}
},
modules: {
	//将上面链式声明为一个变量，
}

2、在main.js中调用

2、使用

1、在组件的template中直接使用

<h2>{{$store.state.count}}</h2>
<h2>{{count}}</h2>  //需要js

2、在js中，3和4比较常用

// 方式1：直接获取
computed: {
    count() {
        // this指的是main.js中的vue实例对象
        return this.$store.state.count;
    }
}

// 方式2：利用mapState
computed: mapState({
    count: state => state.count
})

// 方式3：数组获取
computed: mapState(['count'])

// 方式4：JSON获取
computed: mapState({
    count: 'count'   //当前模块变量名:store中的状态名
})

//vue3
import {useStore} from 'vuex'
export default defineComponent({
	name: "Menu",
	setup() {
		const store = useStore()
		//分页的使用
		const page = computed(() => store.state.page)
		//如果发生变化重新调用接口
		return {page}
	}
})

3、赋值

dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)
commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

this.$store.dispatch('add', 1);
this.$store.commit('add', 1);

import {defineComponent,watch, ref} from 'vue'
setup( ) {
	const currentPage = ref(1)
	const pageSize = ref(10)
	const store  = useStore()            
	watch(currentPage,(a)=>{
		store.commit('setCurrentPage', a);
	})
	return {currentPage, pageSize}
},

3、插槽

//父组件 v-slot可以简写成#  这样只会在对应的插槽显示
<template #bottom>  //必须为template标签
	<div class="box">这里底部</div>
</template>


//子组件
<slot name="bottom"></slot>

//父组件  item可以自定义，它可以访问子组件中slot元素绑定的数据。
<template #edit="item">
	<el-button size="small" type="success">{{item}}</el-button>
</template>

//子组件
<slot  name="edit" :item="scope.row"></slot>

4、Provide / Inject

//祖
const update =()=>{}
provide('ref2', {
  val: state,  // val需要传递的值
  update // 更新传递的值的方法，也可以直接写方法('ref2',update)
})

//孙
setup() {
    const ref2:any = inject('ref2')
    const handleClick = () => {  //handleClick 是一个点击事件
      const key = 'age'
      ref2.update(key, 111) // 调用传递下来的方法去更新父组件的值
    }

5、 获取当前元素的自定义属性

e.currentTarget.getAttribute('data-name')

6、多个变量同时赋相同值互相影响

1.this.billItemLIsts = JSON.parse( JSON.stringify(this.billItemLIstsOriginal) );
2.或使用 ES6 的解析语法 this.billItemLIsts = { ...this.billItemLIstsOriginal }