zoukankan      html  css  js  c++  java
  • vue全局组件与局部组件

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
    </head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <body>
    
    <div id="app">
        <input type="text" v-model="msg">
        <!-- :cmovies="movies":父传子之传值 -->
        <!-- @item-click="itemClick":接收子组件通过自定义事件传过来的值(子传父亲) -->
        <!-- ref="c" 组件标识,利于得到该子组件实例对象 -->
        <cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn>
    </div>
    
    
    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <h1>从父组件传过来的值:</h1>
            
            <ul>
                <li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li>
            </ul>
        </div>
    </template>
    <script>    
        // 子组件    
        const cpn = {
            // 引用模板
            template : "#cpn",
            // props 父传子之接收
            // props: ["cmovies"],
            props : {
                cmovies :{
                    // 限定类型
                    type:Array,
                    // 默认值(父组件未传值)
                    default(){
                        // 这里为什么要用工厂函数?思考下,当限定类型为Object或Array时会报错
                        return ['不能说的秘密','头文字D'];
                    },
                }
            },
            data(){
                // 又是工厂函数,为什么和vue实例data的定义有别?多个vue组件,如果不用工厂函数的话,各个vue实例对象的属性会引用混乱
                return {
                    // 将父组件传过来的值放到data里面,变成自己的属性(拓展性,不然不允许修改)
                    xmovie : this.cmovies
                };
            },
            methods: {
                clickmovie (item){
                    console.log("子组件点击",item)
                    // 将点击事件转成自定义事件传给父组件
                    // emit:发射
                    console.log("值通过自定义事件发射至父组件")
                    this.$emit('item-click',item);
                }
            },
            mounted(){
                console.log("cpn子组件挂载完毕,根组件root对象:",this.$root)
            }
        
        }
        // 父组件,在这里父组件是vue实例
        const app2 = new Vue({
            el: "#app",
            data: {
                // 准备传给子组件的值
                movies: ['海王','海贼王'],
                msg:"watch实时监测",
            },
            /*注册组件*/
            components:{
                cpn,
            },
            methods:{
                itemClick(item){
                    console.log("父组件接收",item);
                }
            },
            //  watch:实时监测属性值的改变
            watch:{
                msg(newVal,oldVal){
                    console.log("watch实时监测更新数据,新数据:",newVal)
                }
            },
            mounted  (){
                // this.$refs 所以的子组件 
                // this.$refs.c 子组件中 设置了ref属性值为c的内个组件
                console.log("vue实例挂载完毕,有一个子组件,实例对象为:",this.$refs.c)
            }
        })
    
    </script>
    </body>
    </html>
  • 相关阅读:
    UVa 1451 Average (斜率优化)
    POJ 1160 Post Office (四边形不等式优化DP)
    HDU 3507 Print Article (斜率DP)
    LightOJ 1427 Substring Frequency (II) (AC自动机)
    UVa 10245 The Closest Pair Problem (分治)
    POJ 1741 Tree (树分治)
    HDU 3487 Play with Chain (Splay)
    POJ 2828 Buy Tickets (线段树)
    HDU 3723 Delta Wave (高精度+calelan数)
    UVa 1625 Color Length (DP)
  • 原文地址:https://www.cnblogs.com/cl94/p/12257507.html
Copyright © 2011-2022 走看看