vue中的组件以及数据传递
<embed id="gdbae"><i id="gdbae"></i></embed>
<rp id="gdbae"><label id="gdbae"></label><table id="gdbae"><ol id="gdbae"><i id="gdbae"><video id="gdbae"></video></i></ol><dfn id="gdbae"><strike id="gdbae"><var id="gdbae"></var><video id="gdbae"><link id="gdbae"><var id="gdbae"><legend id="gdbae"></legend></var></link></video></strike></dfn></table><dd id="gdbae"></dd></rp>

    <dt id="gdbae"><area id="gdbae"><caption id="gdbae"><map id="gdbae"></map></caption></area></dt><col id="gdbae"><del id="gdbae"><kbd id="gdbae"><dt id="gdbae"><keygen id="gdbae"><output id="gdbae"><input id="gdbae"><optgroup id="gdbae"><noscript id="gdbae"></noscript><var id="gdbae"></var><datalist id="gdbae"></datalist></optgroup><label id="gdbae"></label><col id="gdbae"><sup id="gdbae"><textarea id="gdbae"></textarea></sup></col></input><figure id="gdbae"></figure></output></keygen></dt></kbd></del></col><samp id="gdbae"><bdo id="gdbae"><dd id="gdbae"><progress id="gdbae"><cite id="gdbae"></cite></progress></dd></bdo></samp><rt id="gdbae"><bdo id="gdbae"><tr id="gdbae"></tr><section id="gdbae"><link id="gdbae"></link></section></bdo></rt><tfoot id="gdbae"></tfoot>
  1. <map id="gdbae"><embed id="gdbae"><caption id="gdbae"><sub id="gdbae"><caption id="gdbae"></caption><tfoot id="gdbae"><figcaption id="gdbae"></figcaption><legend id="gdbae"></legend><link id="gdbae"><datalist id="gdbae"></datalist></link></tfoot><progress id="gdbae"><p id="gdbae"></p></progress></sub></caption></embed></map>
    1. <fieldset id="gdbae"><code id="gdbae"><thead id="gdbae"><q id="gdbae"></q><datalist id="gdbae"><th id="gdbae"></th></datalist></thead></code><section id="gdbae"></section></fieldset><em id="gdbae"></em>
      • vue中的组件以及数据传递

        作者:日期:2018-01-21 12:11:15 点击:296

        1-组件化开发:

        我们可以很直观的将一个复杂的页面分割成若干个独立组件,每个组件包含自己的逻辑和样式,再将这些独立组件组合完成一个复杂的页面。这样既减少了逻辑复杂度,又实现了代码的重用。页面是组件的容器,组件自由组合形成完整的页面,当不需要某个组件时,或想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

        2-组件化开发的好处

        • 提高开发效率
        • 方便重复使用
        • 便于协同开发
        • 更容易被管理和维护

        3-VUE中组件的特点

        vue中一个自定义标签(不是W3C规定的标准标签如div、p等),vue就会把他看成一个组件
        不能光写一个自定义的标签而不赋予意义

        4-组件分类

        • 页面级组件:
          1)一个页面是一个组件
          2)将可复用的部分抽离出来 基础组件

        • 全局组件:声明一次 可以在任何地方使用

        • 局部组件:必须告诉这个组件属于谁
          一般写插件的时候或者很多人都要用,使用全局组件的多一些。
        //1.组件名不要带有大写,多个单词用-连接
        //2.只要组件名和定义的名字相同时可以的(首字母可以大写,中间不要有大写)
        //3.html采用短横线隔开命名法 JS中转驼峰也是可以的

        定义全局组件

        Vue.component('my-handsome',{ //一个对象可以看成一个组件
        //在自己定义的模板中取自己data返回的数据
        template:'<div>{{msg}}</div>',
        //组件中数据必须是函数类型,返回一个实例作为组件的数据
        data(){
        return {msg:'我很英俊'}
        }
        })
        let vm=new Vue({
        el:'#app',
        data:{
        ........
        }
        })

        定义局部组件

        局部组件使用的三部曲:
        1.创建这个组件
        2.注册这个组件
        3.使用这个组件

        组件是相互独立的,不能直接跨作用域(子组件不能直接使用父组件的data)
        vm的实例也是一个组件,自定义组件中也拥有声明周期函数

        //如果组件共用了数据,会导致同时刷新,但是组件应该是独立性的
        //为什么会独立呢?
        //因为data是一个函数,return 出去是一个新对象,新对象那就是一个独立的作用域。
        // 所以组件中的data要是一个函数,函数是一个作用域,return 出去一个新对象,
        // 这样就与其他组件的data不冲突是独立的了
         
        //组件理论上是可以无限嵌套的,因为vm本身就是一个组件,他里面也自定义了组件,并且自定义的组件也是一个对象,
        //并且和其父级一样拥有各种属性,所以其自己又可以作为“父组件”,他里面也可以放组件
         
        let obj={
        school:'zfpx'
        };
        //1.创建组件
        let component1={
        //这里的引号问题 把里面的单引号转义一下,或者使用ES6的模板字符串
        template:'<div @click="school='home'">组件一 {{school}}</div>',
        data(){
        return obj;
        }
        };
        let component2={
        template:'<div @click="fn">组件二 {{school}}</div>',
        data(){
        return obj;
        },
        methods:{
        fn(){
        //这里的this不再指向其父级vm,而是指向自己的组件
        console.log(this)
        }
        }
        }
         
         
        let vm=new Vue({
        el:'#app',
        //2.注册组件
        components:{
        component1:component1, //在ES6中名字一样可以只写一个,如component2那样
        component2,
        },
        data:{
        a:1
        }
        })

        组件嵌套

        1.如果要在一个组件中使用另一个组件,先要保证使用的组件得是真实存在的,
        2.在需要引用这个组件的实例通过components注册这个组件
        3.组件需要在父级的模板中通过标签的形式引入
         
        //son中要用到grandson,所以得把grandson声明到son上面
        let grandson={
        template:'<div>grandson</div>'
        };
         
        //parent中要用到儿子,所以得先把son声明到parent上面
        let son={
        template:'<div>son <grandson></grandson></div>',
        components:{
        grandson
        }
        };
        let parent={
        template:'<div>parent <son></son></div>',
        components:{
        son,
        }
        };
         
         
        let vm=new Vue({
        el:'#app',
        template:'<parent></parent>',
        components:{
        parent
        },
        data:{
        a:1
        }
        })

        父子组件数据传递(父传子)

        组件的传递:
        父亲 -> 儿子 -> 孙子 (属性传递)
        孙子 -> 儿子 -> 父亲 (事件传递)

        html结构

        <div id="app">
        父亲:{{money}}
        <!--当前组件的属性(m)=父级的值(1)-->
        <!--<child m="1"></child>-->
         
        <!--给儿子加了一个m属性,属性对应的数据是属于父亲的,但是直接写m="money",money就成了字符串了
        但是我们后面的money是一个变量,所以我们就得用动态绑定:m="money"的格式了
        如:
        a='1' =>得到的1是一个字符串 :a="1" =>得到的1是一个数字
        a="true" =>得到的是一个字符串"true" :a="true" =>得到的是一个布尔
         
        如果自定的属性是有短横线连接的写法时 m-m的话,下面用的话得用驼峰mM
        -->
        <child :m="money"></child>
        </div>

        父传子流程:
        - 1.首先子组件嵌套在父组件内(结构)
        - 2.在html中给子组件的标签中 加上自定义属性 并赋值,这个值就是要在父组件中得到的数据,既然是数据,肯定要是变量,所以我们要给
        这个属性前面加上:,叫做动态绑定
        - 3.在JS中子组件里,props接收(获取)在上一步中子组件中定义的属性值
        - 4.然后在子组件定义的模板中就可以用获取到的属性值了

        //这个实例就是一个组件,parent
        let vm=new Vue({
        el:'#app',
        components:{
        child:{
        //会在当前子组件上声明一个m属性,值是父亲的。(儿子通过props获取到父亲的m属性值)相当于 this.m=100
        //如果props是一个数组,他不能校验里面获取到的值是什么类型,把其变成一个对象,里面有几个方法如下:
        //props:['m','a'],
        props:{
        //校验时不能阻断代码的执行,只是警告而已
        m:{ //校验属性的类型,如果不带:,得到的肯定是字符串类型,只有:m="1"才是数字类型1,:m="true"才是布尔类型
        type:[String,Boolean,Function,Object,Array,Number],
        //如果什么都不传,会调用default,要给一个默认值,否则就是false了
        default:0,
        //此属性是必须传递的意思,但不能与default同用
        required:true,
        //自定义校验器 第一个参数是当前传递的值,返回true表示通过,false表示不通过
        validator(val){
        return val>300
        }
        }
        },
         
        data(){
        return {n:5} //有了上面的props中的m了,就不能再让自己data(包括methods等其他对象中)中有m了,会冲突
        },
         
         
        template:'<div>儿子:{{m}} {{n}}</div>',
        //如果想在child中取的值名跟parent保持一致,我们可以用computed属性;但是这样很麻烦,直接在child上设置属性的时候
        //设置成跟parent一样的名字就好了
        // computed:{
        // money(){return this.m}
        // },
        }
        },
        data:{
        money:400
        }
        })

        父子组件数据传递(子传父)

        父亲绑定一些事件,儿子触发这个事件,将参数传递过去 、
        单项数据流:(儿子不能改爸爸的数据,告诉爸爸让他改,父亲数据刷新后,儿子就刷新了)

        html结构

        <div id="app">
        父亲:{{money}}
        <!--child.$on('child-msg',things) 相当于订阅-->
        <child :m="money" @child-msg="things"></child>
         
        </div>
         

        子传父流程:
        - 1.首先在父可以传子的基础上,给child一个自定义事件,并且这个自定义事件是父亲的方法

        • 2.在子组件的methods中定义一个儿子的方法,并且这个方法是要传递(发射)给上一步儿子的自定义方法的,第一个参数是
          child上自定义的事件名,第二个参数是要传递的值
        • 3.于是当子组件中的方法触发(点击、双击等等)时,父亲的方法就收到了儿子发射的方法中传递的值,然后更新自己的数据即可。
        //这个实例就是一个组件,parent
        let vm=new Vue({
        el:'#app',
        data:{
        money:400
        },
        methods:{
        //相当于发布订阅的on
        things(val){
        this.money=val;
        }
        },
        components:{
        child:{
        props:['m'],
        template:'<div>儿子:{{m}} <button @dblclick="getMoney()">多要钱</button></div>',
        methods:{
        getMoney(){
        //触发自己的自定义事件,让父亲的方法执行 相当于发布
        this.$emit('child-msg',800)
        }
        },
         
        }
        },
         
        })

        上一篇: 浅读vue的生命周期

        下一篇: vue开发中router路由详解

        73099威尼斯城73099.com |威尼斯73099.com官方网站登录 |威尼斯手机娱乐官网 | |手机版 | | 澳门威尼斯3544.com,威尼斯3544.com官网登陆,威尼斯3544.com备用网址-0327.com|威尼斯澳门官方6799.com,www.6799.com,威尼斯官方娱乐6799.com登陆-vns566.net|6799.com威尼斯手机版,6799.com威尼斯网址,6799.com威尼斯官网登陆-59859.com|86087威尼斯城86087.com,威尼斯86087.com官方网站登录,威尼斯手机娱乐官网-83855.com|澳门威利斯人手机版,www.86087.com官方入口,澳门威利斯人在线娱乐-944185.com|威尼斯澳门官方4886.com,www.4886.com,威尼斯官方娱乐4886.com登陆-k92988.com|