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 }

最后

以上就是聪慧大叔为你收集整理的vue3 值操作的全部内容，希望文章能够帮你解决vue3 值操作所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。