最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

Vue急速入门-4

来源：博客园

组件其他

根组件和组件的一些问题归总:1.new Vue() el:"xx" 管理的Div 就算根组件2.父子组件的数据是无法共享的3.组件有自己的html,css,js4.在组件中,this代指当前组件5.组件中data是一个函数，需要有返回值(return) 并且返回的是"对象"！6.全局组件内部的组件就是局部组件7.全局组件需要定义在Vue实例上面

组件间通信之父传子

组件间数据并不共享，需要进行数据传递！父传子：使用自定义属性方法在子组件标签上自定义绑定属性，并且在子组件props数组/对象中进行注册
        Title    <script src="vue/vue.js"></script>
    
<script>    var vm = new Vue({        el:"#app",        data:{fname:"程潇",fage:18},        methods:{},        components: {            "child":{                template:`           
           
子组件
           
          名字：{{ fname }}<--->年龄：{{ fage }}          
`, // 子组件的数据可以通过模板语法放入template层                data(){                    return{                        cname:"刘亦菲"                    }                },                // props: ["fage"] //如果我们需要父传给子数据 就需要将传输的数据变量名注册在props数组中                props: {fage: String, fname: String},                // props也支持对象方法:可以指定传输数据的数据类型，如果不符合对应的数据类型，就会报错，但是不影响显示            }        }    })</script>

父传子步骤


(相关资料图)

1.在父组件中将需要传递的数据通过props数组/对象注册2.子组件标签中自定义绑定属性 :fage="fage"，绑定的就是需要传递的数据3.组件通过模板语法调用即可

组件间通信之子传父

# 通过在子标签编写自定义事件，并且在父组件中编写函数即可

流程详解

        Title    <script src="vue/vue.js"></script>
    
        
父组件----子组件传递来的数据:{{fname}}
            
<script>    Vue.component("child",{        template:`
 子传父演示
    
`,        data(){            return{                cname:"小蜜瓜"            }        },        methods:{            handleSend() {                this.$emit("myevent",this.cname)            }        }    })    // 父组件    var vm = new Vue({        el:"#app",        data:{            fname:""        },        methods:{            handleEvent(cname){                console.log(cname)                this.fname = cname            }        }    })</script>

案例演示通过在子组件中输入框输入内容，点击按钮传输到父组件中

        Title    <script src="vue/vue.js"></script>
子传父数据展示>>>>>{{fText}}
    
<script>    Vue.component("child",{        template:`        
子传父案例演示~
     
请输入内容
    
 
        `,data(){            return{                cText:""            }        },        methods:{            handleSend(){                console.log(this.cText)                this.$emit("cevent",this.cText)            }        }    })    var vm = new Vue({        el:"#app",        data:{fText:""},        methods:{            handleRecv(cText){                this.fText = cText            }        }    })</script>

子传父步骤

1.在子组件编写点击事件2.在methods中通过this.$emit()方法将需要传递给父组件的数据编写进去3.在 子组件标签中 自定义事件，绑定父组件函数！4.父组件函数接收this.$emit()方法传递过来的参数

ref属性(也可以实现组件间通信:父和子通信都可以实现~)

  • ref放在标签上 拿到的是原生的DOM节点(标签对象)
  • ref放在组件上，拿到的是组件对象,对象中的数据,函数(方法)都可以直接使用
ref 属性可以更方便拿到实现父子通信# ref属性放在普通标签上  例:-通过this.$refs.myinput  拿到的是原生dom对象，通过原生dom修改 标签#ref属性放在组件上   例:-通过this.$refs.mychild  拿到的是组件对象，既然拿到了组件对象，组件对象中的 变量，方法，都能直接通过 . 的方式调用    -因此不需要关注是子传父，还是父传子，直接通过组件对象，使用即可
ref-父传子
            <script src="vue/vue.js"></script>
    
        
父传子-ref属性
        
父组件--名字:{{fname}}--年龄:{{fage}}
        
    
        
<script>     var child ={        template:`        
        
子组件--名字:{{cname}}--年龄:{{cage}}
        
        `,        data(){            return {                cname:"刘亦菲",cage:"19"            }        },        methods:{}    }    var vm = new Vue({ //根组件        el:"#app",        data:{            fname:"牛牛",fage:"13"        },        methods:{            changeChild(){                console.log(this.$refs)                this.$refs.mychild.cname = this.fname                this.$refs.mychild.cage = this.fage            }        },        components:{  //子组件 通过变量命名赋值给child            child        }    })</script>
ref-子传父
            <script src="vue/vue.js"></script>
    
        
子传父-ref属性
        
父组件--名字:{{fname}}--年龄:{{fage}}
        
    
        
<script>     var child ={        template:`        
        
子组件--名字:{{cname}}--年龄:{{cage}}
        
        `,        data(){            return {                cname:"刘亦菲",cage:"19"            }        },        methods:{}    }    var vm = new Vue({ //根组件        el:"#app",        data:{            fname:"牛牛",fage:"13"        },        methods:{            changeChild(){                console.log(this.$refs)                this.fname = this.$refs.mychild.cname                this.fage = this.$refs.mychild.cage            }        },        components:{  //子组件 通过变量命名赋值给child            child        }    })</script>

动态组件

1.不使用动态组件

组件不能用驼峰体！！！！！！！

        Title    <script src="vue/vue.js"></script>
    首页|    订单 |    商品                
<script>    var goods = {        template: `          
              商品页          
        `    }    var home = {        template: `          
              首页          
        `    }    var orderform = {        template: `          
              订单页          
        `    }    var vm = new Vue({        el: "#app",        data: {            chooseType: "home"        },        methods: {            handleClick(some) {                console.log(some)                console.log(this.chooseType)                this.chooseType = some            }        },        components: {            home, goods, orderform        }    })</script>

不适用动态组件，需要多写几步，我们推荐使用动态组件

        Title    <script src="vue/vue.js"></script>
    首页|    订单 |    商品    
<script>    var goods = {        template: `          
              商品页          
        `    }    var home = {        template: `          
              首页          
        `    }    var orderform = {        template: `          
              订单页          
        `    }    var vm = new Vue({        el: "#app",        data: {            chooseType: "home"        },        methods: {            handleClick(some) {                this.chooseType = some            }        },        components: {            home, goods, orderform        }    })</script>

keep-alive保持组件不销毁

        Title    <script src="vue/vue.js"></script>
    首页|    订单 |    商品            
<script>    var goods = {        template: `          
              商品页                        
        `    }    var home = {        template: `          
              首页                        
        `    }    var orderform = {        template: `          
              订单页                        
        `    }    var vm = new Vue({        el: "#app",        data: {            chooseType: "home"        },        methods: {            handleClick(some) {                this.chooseType = some            }        },        components: {            home, goods, orderform        }    })</script>

插槽

一般情况下，编写完一个组件之后，组件的内容都是写死的,如果我们需要添加数据 只能去组件中修改，拓展性很差插槽的概念：我们只需要在组件中添加  标签，即可在 body的组件标签中添加内容
        Title    <script src="vue/vue.js"></script>
    
            
                    
        
<script>    var home = {        template: `          
          
home页面
                        
结束了
          
`,    }    var vm = new Vue({        el: ".app",        data: {},        components: {            home,        }    })</script>
具名插槽
我们在组件的slot 标签属性中添加 name="xx"xx就是slot的名字, 在body中我们就可以指定slot来编写内容
        Title    <script src="vue/vue.js"></script>
    
            
                    
         
五菱宏光刹不住,我是有田你记住
        
<script>    var home = {        template: `          
          
home页面
                        
结束了
                      
`,    }    var vm = new Vue({        el: ".app",        data: {},        components: {            home,        }    })</script>

计算属性

计算属性只有使用的变量发生变化时，才重新运算计算属性与python中的property伪装很像，可以将方法伪装成属性
计算属性基本使用

输入框输入英文首字母大写案例

        Title    <script src="vue/vue.js"></script>
    
        编写单词，首字母转换成大写展示    
        --{{getUp(mytext)}}
<script>    var vm = new Vue({        el: "#app",        data: {            mytext: ""        },        methods: {            getUp(mytext) {                console.log(mytext)                return (mytext.slice(0, 1).toUpperCase() + mytext.slice(1))            }        }    })</script>
使用计算属性

过滤案例

        Title    <script src="vue/vue.js"></script>
过滤案例
    
请输入想要搜索的内容 
  
            
  • {{item}}
    •     
<script>    var vm = new Vue({        el:"#app",        data:{            mytext:"",            dataList: ["a", "at", "atom", "be", "beyond", "cs", "csrf"]        },        methods:{        },        computed:{                newDataList(){                    return this.dataList.filter(item=>item.indexOf(this.mytext)>=0)                }        }    })</script>

监听属性

在data中定义了一些变量，只要变量发生变化，我们就执行一个函数
        Title    <script src="./js/vue.js"></script>
    
                Python| Linux        
            假设有很多课程，点击上面的标签可以完成过滤        
    
<script>    var vm = new Vue({        el: ".app",        data: {            course_type: "0"        },        created() {            this.getData()        },        methods: {            getData() {                // 发送ajax ，获取所有课程,通过course过滤                // http://127.0.0.1:8080/api/v1/courses?course_type=0            },            // handleClick(type){            //     this.course_type=type            //     this.getData()            // }        },        watch: {            course_type() {                console.log("我变化了")                this.getData()            }        }    })</script>

关键词： 可以实现 发生变化