高级vue setup两参数之属性
父组件
<script>
import { computed, provide, watch } from 'vue'
import {ref,reactive,toRefs} from 'vue'
import Children from './components/children.vue';
export default{
setup() {
let data = reactive({
mes: "adssss",
userObj: {
userName: "www.96net.com.cn",
pass:'1212'
},
});
provide("name", data.mes);
const add = () => {
data.mes++;
console.log(data.mes);
};
watch(() => data.mes, (newvalue, oldvlaue) => {
console.log("n" + newvalue);
console.log("o" + oldvlaue);
});
return {
...toRefs(data),
add,
};
},
components: { Children }
}
</script>
<template>
<div id="as">
{{mes}}
<br>
</div>
<button @click="add">+</button>
<hr>
<Children :mes="mes" :userObj="userObj" msg2="323232"></Children>
</template>
<style scoped>
</style>
子组件
<!-- 子组件 -->
<template>
<div></div>
</template>
<script>
export default {
props:{
mes:{
type:Object
},
userObj:{
type:Object
}
},
setup(props,context){
console.log(props);
console.log(context.attrs.msg2)
}
}
</script>
<style lang='scss' scoped>
</style>
注意 props 接受参数传递的参数 context 绑定非传递过来的参数属性
