高级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  绑定非传递过来的参数属性