vue3 随笔

最新推荐文章于 2024-10-05 01:22:45 发布

贾彦亮

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量87

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45461004/article/details/137026893

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3-demo</title>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@next"></script>
    <script src="https://unpkg.com/vuex@next"></script>
</head>
<body>
    <div id="app" style="width: 100vw;height: 100vh;">
       原有数据，测试是否会被销毁？
    </div>
</body>
</html>
<script>
    const { createApp ,ref ,reactive , defineProps , defineEmits ,toRefs , onMounted} = Vue
    /**
     * defineProps 和 defineEmits 必须在  <script setup> 中，才能使用。并且在 <script setup>  中，并不需要导入。
     * 用setup组合API 替换 vue2 中的data/computed/watch/methods等选项。
     * 选项式的 beforeCreate、created，被setup替代了。
     * setup表示组件被创建之前、props被解析之后执行，它是组合式 API 的入口。
     * 选项式的 beforeDestroy、destroyed 被更名为 beforeUnmount、unmounted。
     * 在使用 setup组合时，不建议使用选项式的生命周期，建议使用 on* 系列 hooks生命周期。
    * */
    const vue3Child = {
        template: `
            <div>
                自身数据：{{data.name}}<br>
                接收父级传过来的数据：{{childData}}<br>
                <button @click="setParentData">向父组件传数据</button>
            </div>
          `,
        /**
        * 在不是 <script setup> 语法糖中，props 和 emits 需要声明后，才能在setup中使用。
         * props 在第一个参数props 中。
         * emit 在第二个参数context 中。
        * */
        props: {
            childData: {
                type: String,
                default: "",
            }
        },
        emits:{
            setParentData:null
        },
        setup(props,context){
            //props 需要在上面props声明后使用，不然为 undefined
            //context ：上下文，包括 attrs (Attribute)、 emit(触发事件) 、slots (插槽)。

            //data
            const data = reactive({
                name:'我是子级数据'
            })

            //methods
            const setParentData  = () => {
                context.emit('setParentData',"我是子组件给父组件传递的数据")
            }

            const { childData } = toRefs(props); // 将props接收的数据，转成响应式的

            return{
                data,
                childData,
                setParentData
            }
        },
        mounted(){
            console.log("子组件的mounted"); //生效
        },
        onMounted(){
            /**
             * onMounted 不生效
             * 结论： 在不是<script setup> 语法糖中，on* 系列的生命周期函数 无效
             * */
            console.log("子组件的onMounted");
        }
    }
    const vue3Parent = {
        template: `
            <div>
                自身数据：{{data.name}}<br>
                接收子组件数据：{{getChildData}}
                <br>
                -----------分割线--------------------
                <br>
                <vue3Child :childData="childData" @setParentData="setParentData"></vue3Child>
            </div>
          `,
        components: {
            vue3Child
        },
        setup(props,context){
            //data
            const data = reactive({
                name:'我是父级数据'
            })
            let getChildData = ref('')
            const childData = ref("我是父组件传给子组件的数据")

            //methods
            const setParentData = (data) => {
                console.log("子组件emit的方法,带过来数据为：",data);
                getChildData.value = data  // 修改ref数据，需要加上.value
            }

            return{
                data,
                childData,
                getChildData,
                setParentData
            }
        }
    }
    
    /**
     * 创建一个应用实例,并且挂载到app上
     * #app 节点下的原有的内容 会被全部销毁
     * */
    const app = createApp(vue3Parent).mount("#app")
</script>