Composition API的使用

目标

• 父子组件传值props 和 context
• 祖孙组件传值provice和inject
• 生命周期 on**
• 编程式路由的使用 useRouter
• vuex useStore
• 获取DOM ref

1. 父子组件传值

setup() 函数
setup() 函数有两个参数：props 和 context。

为什么要有这两个参数呢？我们知道父子组件之间是可以传值。但是现在我们的业务逻辑都写在setup函数中，而setup中没有this指针，那么就只能靠这两个参数来进行传递了。

● props：父组件向子组件传值的参数。
● context：子组件向父组件传值的参数。

1.6.1 props

1、子组件侧用props

    <script>
    export default {
      setup(props, context) {
        console.log(props.msg)
      },
      props: {
        msg: String,
      },
    };
    </script>

2、父组件侧 属性名=值

<div>
  <Hello msg="hello"></Hello>
</div>

1.6.2.context参数

1、子组件context.emit(eventname, 值)
2、父组件内是@eventname="本地函数"

    <script>
    export default {
      setup(props, context) {
        function send() {
          context.emit("childmsg", "hello world!");
        }
    
        return {
          send,
        };
      },
      props: {
        msg: String,
      },
    };
    </script>

<Hello msg="hello" @childmsg="get"></Hello>
function get(param) {
console.log(param)
}

2. provide 和inject祖孙间传值

provide("msg","要给孙子的信息") 相当于set方法
inject("msg") 相当于get方法

父组件

    <template>
        <div id="app">
            父组件<br>
            <hello></hello>
        </div>
    </template>

    <script>
        import hello from '@/components/hello'
        import {provide} from 'vue'
        export default{
            setup(){
                provide("msg","要给孙子的信息")
            },
            components:{
                hello
            }
        }
    </script>

子组件

    <template>
        <div id="container">
            子组件<br>
            <subhello></subhello>
        </div>
    </template>

    <script>
        import subhello from '@/components/subhello'
        
        export default{
            setup(){
            },
            components:{subhello}
            
            
        }
    </script>

孙组件

    <template>
        <div id="container">
            孙子组件
        </div>
    </template>

    <script>
        import {inject} from 'vue'
        export default{
            setup(){
                alert("孙子收到的："+inject("msg"))
            }
        }
    </script>

3.生命周期

注意：在Composition API中没有beforeCreate()和created()这里两个声明周期函数了，统一使用setup()。注意加on

        <template>
          <div>
            {{ num }}
            <button @click="add">加</button>
          </div>
        </template>

        <script>
        import { reactive,toRefs,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from "vue";

        export default {
          setup() {
            const state = reactive({
              num: 1,
            });

            function add() {
              state.num++;
            }

            onBeforeMount(() => {
              console.log("DOM挂载前!");
            });

            onMounted(() => {
              console.log("DOM挂载后!");
            });

            onBeforeUpdate(() => {
              console.log("数据更新前!");
            })

            onUpdated(() => {
              console.log("数据更新后!");
            })

            onBeforeUnmount(() => {
              console.log("实例卸载前!");
            })

            onUnmounted(() => {
              console.log("实例卸载后!");
            })
         
            return {
              ...toRefs(state),
              add,
            };
          },
        };
        </script>

4.编程式路由的使用

● 先import导入useRouter模块。
● 通过useRouter模块获取router对象。以后的路由写法就与前面所学一样了。
关键代码：

              <button @click="toHome">Home</button>
              <button @click="toAbout">About</button>


    <script>
    import { useRouter } from "vue-router";// 先import导入useRouter模块

    export default{
      setup() {
        const router = useRouter();//通过useRouter模块获取router对象

        function toHome(){
          router.push('/');
        }
      
        function toAbout(){
          router.push({path:'/about',query:{name:'zhangsan'}});
        }

        return {
          toHome,
          toAbout
        }
      },
    }
    </script>

5.vuex--useStore

    <script>
    import { useStore } from "vuex";

    export default {
      setup() {
        const store = useStore();
        console.log(store.state.num);
        console.log(store.getters.newnum);
      }
    };
    </script>

6.获取DOM

● 在HTML标签中使用 ref 属性标识一个DOM对象。
● 需要 import 导入 ref 对象。
● 使用 const myRef = ref(null); 的方式获取包装好的DOM对象，命名为HTML中的 ref 属性名。并且此数据需要暴露出去。
● 使用 value 属性即可获取 DOM对象。

    <template>
      <div ref="myRef">获取单个DOM元素</div>
    </template>

    <script>
    import { ref, onMounted } from 'vue';

    export default {
      setup() {
        const myRef = ref(null);   //ref(null)是一个固定的写法

        onMounted(() => {
          console.dir(myRef.value);
        });
        return {
          myRef
        };
      }
    };
    </script>