vue day06 组件其他

最新推荐文章于 2024-06-14 22:06:46 发布

parkwoojin1102

最新推荐文章于 2024-06-14 22:06:46 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/parkwoojin1102/article/details/118330787

版权

组件的嵌套

声明路由的时候设置children,这是children是一个数组，数组里是路由对象
这个children的组件就会渲染在它父组件的<router-view>中

<body>
    <div id='app'>
        <router-view></router-view>
    </div>

    <template id="father">
        <div>
            father
            <!-- 在父组件中预留展示区域 -->
            <router-view></router-view>
        </div>
    </template>

    <template id="son">
        <div>son</div>
    </template>

    <script>
        let son = {
            template: "#son"
        };
        let father = {
            template: "#father"
        };
        const router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/home",
                },
                {
                    path: "/home",
                    component: father,
                    // 嵌套
                    children: [
                        //  不加/
                        {
                            path: "son",
                            component: son,
                        }
                    ]
                },

            ]
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            router,
        })
    </script>
</body>

命名视图

我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
components属性设置的
给router-view设置名字，这个名字和components组件名字是对应的
设置默认值default对应组件可以设置名字也可以访问

<body>
    <div id='app'>
        <router-view></router-view>
        <!-- router-view可以设置名字，指定渲染的组件 -->
        <router-view name="son"></router-view>
        <router-view name="son2"></router-view>
        <router-view name="son3"></router-view>
    </div>

    <template id="father">
        <div>
            father
            <!-- 预留展示区域 -->
            <router-view></router-view>

        </div>
    </template>

    <template id="son">
        <div>son</div>
    </template>
    <template id="son2">
        <div>二son</div>
    </template>
    <template id="son3">
        <div>三son</div>
    </template>
    <script>
        let son = {
            template: "#son"
        };
        let son2 = {
            template: "#son2"
        };
        let son3 = {
            template: "#son3"
        };
        let father = {
            template: "#father"
        };
        const router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/home",
                },
                {
                    path: "/home",
                    components: {
                  //通过default属性可以设置默认的组件，默认组件只有一个，不写名字也可以渲染
                        default: father,
                        son2: son2,
                        son3,
                        son
                    },
                    // 嵌套
                    children: [
                        //  不加/
                        {
                            path: "son",
                            component: son,
                        }
                    ]
                },

            ]
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            },
            router,
        })
    </script>
</body>

计算属性和监听器

watch

监听data中属性的改变：

改变姓名

<body>
    <div id='app'>
        <input type="text" v-model:value="firstname">+
        <input type="text" v-model:value="lastname">
        <button>=</button>
        <input type="text" v-model:value="fullname">
    </div>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                fullname: ''
            },
            methods: {},
            // 监听
            watch: {
                //   参数是属性
                //function(newVal,oldVal) 第一个参数是新数据，第二个参数是旧数据
                "firstname": function () {
                    this.fullname = this.firstname + '-' + this.lastname;
                },
                "lastname": function () {
                    this.fullname = this.firstname + '-' + this.lastname;
                }
            }
        })
    </script>
</body>

Computed用法

<body>
    <div id='app'>
        <input type="text" v-model:value="firstname">+
        <input type="text" v-model:value="lastname">
        <button>=</button>
        <input type="text" v-model:value="fullname">
    </div>


    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                // fullname: ''
            },
            methods: {},
            computed: {
                // 计算属性； 
                // 特点：当计算属性中任何一个 data 属性改变之后，
                // 都会重新触发 本计算属性 重新计算，从而更新 fullName 的值
                // fullname() {
                //     console.log(99999);
                //     return this.firstname + '-' + this.lastname;
                // },
                fullname: {
                    // 获取数据
                    get: function () {
                        console.log(9999);
                        return this.firstname + '-' + this.lastname;
                    },
                    // set 只有该编辑当前这个input才会改变 
                    set: function (newVal) {
                        console.log(newVal);
                        console.log(newVal.split("-"));

                        this.firstname = newVal.split("-")[0]
                        this.lastname = newVal.split("-")[1]
                    }
                }
            }
        })
    </script>
</body>

method、computed和watch的区别

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
methods方法表示一个具体的操作，主要书写业务逻辑；
watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

parkwoojin1102

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue day06 组件其他

组件的嵌套声明路由的时候设置children,这是children是一个数组，数组里是路由对象这个children的组件就会渲染在它父组件的<router-view>中 <body> <div id='app'> <router-view></router-view> </div> <template id="father"> <di.
复制链接

扫一扫