国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue組件——子組件向父組件傳遞數(shù)據(jù)以及路由

CoorChice / 1705人閱讀

摘要：自定義事件我們知道，父組件使用傳遞數(shù)據(jù)給子組件。另外，父組件可以在使用子組件的地方直接用來監(jiān)聽子組件觸發(fā)的事件。為了讓組件可以組合，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。

自定義事件 
我們知道，父組件使用 prop 傳遞數(shù)據(jù)給子組件。但子組件怎么跟父組件通信呢？這個(gè)時(shí)候 Vue 的自定義事件系統(tǒng)就派得上用場(chǎng)了。
使用 綁定自定義事件v-on

每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口，即：

使用 $on(eventName) 監(jiān)聽事件

使用 $emit(eventName) 觸發(fā)事件

Vue 的事件系統(tǒng)與瀏覽器的 EventTarget API 有所不同。盡管它們的運(yùn)行起來類似，但是 $on 和 $emit 并不是addEventListener 和 dispatchEvent 的別名。

另外，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。
不能用 $on 偵聽子組件釋放的事件，而必須在模板里直接用 v-on 綁定，參見下面的例子。

//定義子組件
var Child = {
//獲取data()中的數(shù)據(jù)，并添加一個(gè)點(diǎn)擊事件
    template: ``,
    data(){
        return {
            counter: 0
        }
    },
    methods:{
        addCounter(){
            this.counter++;
            //自定義事件$emit傳回根組件，同時(shí)調(diào)用根組件方法
            this.$emit("add-parent-total")
        }
    }
}
//根組件
var vm = new Vue({
    el: "#app",
    data:{
        total: 0
    },
    components: {
        Child
    },
    methods: {
//根組件中子組件改變根組件的方法
        addTotal(){
            this.total++
        }
    }
})

//html
使用插槽分發(fā)內(nèi)容

注意兩點(diǎn)：

組件不知道它會(huì)收到什么內(nèi)容。這是由使用 的父組件決定的。

組件很可能有它自己的模板。

為了讓組件可以組合，我們需要一種方式來混合父組件的內(nèi)容與子組件自己的模板。這個(gè)過程被稱為內(nèi)容分發(fā) (即 Angular 用戶熟知的“transclusion”)。Vue.js 實(shí)現(xiàn)了一個(gè)內(nèi)容分發(fā) API，參照了當(dāng)前 Web Components 規(guī)范草案，使用特殊的 元素作為原始內(nèi)容的插槽。

//slot插槽使其可以在html中傳入數(shù)據(jù)，也可以在其中傳入默認(rèn)內(nèi)容
var Child = {
    template: `
1 默認(rèn)內(nèi)容
`
}
var vm = new Vue({
    el: "#app",
    components: {
        Child
    }
})

html
hello

有名slot

    //slot插槽使其可以在html中傳入數(shù)據(jù)，也可以在其中傳入默認(rèn)內(nèi)容
var Child = {
    template: `
1 
    header
    默認(rèn)內(nèi)容
    footer
    
`
}
var vm = new Vue({
    el: "#app",
    components: {
        Child
    }
})

html


    
頭部?jī)?nèi)容

    22222
    
底部?jī)?nèi)容
非父子組件

有時(shí)候，非父子關(guān)系的兩個(gè)組件之間也需要通信。在簡(jiǎn)單的場(chǎng)景下，可以使用一個(gè)空的 Vue 實(shí)例作為事件總線：

    var bus = new Vue()
        var AppHead = {
        template: "
",
        methods: {
            add() {
                // 觸發(fā)組件A中的事件
                bus.$emit("change", 1)
            }
        }
    }
    var AppBody = {
        template: "
{{ counter }}
",
        data() {
            return {
                counter: 0
            }
        },
        created() {
            //在組件B創(chuàng)建的鉤子中監(jiān)聽事件
            bus.$on("change", count => {
                this.counter += count
            })
        }
    } 
    var vm = new Vue ({
        el: "#app",
        components: {
            AppHead,
            AppBody
        }
    })
模態(tài)框?qū)嵗?/b> 



  
  
  
  Document
  


  

    
    
    
        
注冊(cè)

        
        

            
        

    
    
        
登錄
vue路由

對(duì)于大多數(shù)單頁面應(yīng)用，都推薦使用官方支持的 vue-router 庫。更多細(xì)節(jié)可以看 vue-router 文檔。

靜態(tài)路由

不需要復(fù)雜的路由

首先需要
npm i -S vue-router 安裝router庫
        var NewsComponent = { template: `
新聞
`}
        var ShopComponent = { template: `
商場(chǎng)
`}
        var NotFoundComponent = { template: `
404
`}
        var routes = [
            {
                path: "/",
                redirect: "/news"http://默認(rèn)根目錄跳轉(zhuǎn)
            },
            {
                path: "/news",
                component: NewsComponent
            },
            {
                path: "/shop",
                component: ShopComponent
            },
            {
                path: "*",
                component: NotFoundComponent
            }
        ]
        var router = new VueRouter({
            routes
        })
//        var app = new Vue({
//            el: "#app",
//            router
//        })

        var app = new Vue({
            el: "#app",
            router
        })
動(dòng)態(tài)路由 
var Goods = {
      template: `

        
    
          
  • 
            
            {{ good.goods_name }}
            {{ good.price }}
          
    • 
        

      
`,
      watch: {
        $route (to, from) {
          console.log(to.params.id);
          axios.get("http://h6.duchengjiu.top/shop/api_goods.php?cat_id="+to.params.id).then(res => {
            console.log(res.data.data)
            this.goods = res.data.data
          })
        }
      },
      data() {
        return {
          goods: []
        }
      }
    }
    var router = new VueRouter({
      routes: [
        { path: "/cat/:id", component: Goods }
      ]
    });
    var vm = new Vue({
      el: "#app",
      router,
      data: {
        cats: []
      },
      created() {
        axios.get("http://h6.duchengjiu.top/shop/api_cat.php").then(res => {
          console.log(res)
          this.cats = res.data.data
        })
      }
    });

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51497.html

相關(guān)文章

  • vue學(xué)習(xí)筆記4

    摘要：主要當(dāng)作屬性來使用方法表示一個(gè)具體的操作，主要書寫業(yè)務(wù)邏輯一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。父組件向子組件傳值 組件實(shí)例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數(shù)據(jù) // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

    番茄西紅柿 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記3

    摘要：主要當(dāng)作屬性來使用方法表示一個(gè)具體的操作，主要書寫業(yè)務(wù)邏輯一個(gè)對(duì)象，鍵是需要觀察的表達(dá)式，值是對(duì)應(yīng)回調(diào)函數(shù)。Vue.js - Day3 定義Vue組件 什么是組件： 組件的出現(xiàn)，就是為了拆分Vue實(shí)例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調(diào)用對(duì)應(yīng)的組件即可； 組件化和模塊化的不同： 模塊化： 是從代碼邏輯的角度進(jìn)行劃分的；方便代碼分層開...

    番茄西紅柿 評(píng)論0 收藏0

  • vue 模仿今日頭條demo

    vue 頭條 demo 寫在前面 總結(jié)一下寫 demo 過程中 遇到的一些問題，方便自己的學(xué)習(xí)總結(jié)！如有錯(cuò)誤，還請(qǐng)指正！ 一直想學(xué)習(xí)使用 vue ，并準(zhǔn)備以后在實(shí)際項(xiàng)目使用，之前跟著慕課網(wǎng) 黃軼 老師 敲了一下 餓了么商品購買頁的demoele效果預(yù)覽 該 demo 借鑒自 hcy1996-github 這個(gè)項(xiàng)目，但內(nèi)部?jī)?nèi)容，布局風(fēng)格，完全不同，只為共同學(xué)習(xí)，共同交流 數(shù)據(jù)接口 直接打開 今日...

    simpleapples 評(píng)論0 收藏0

  • vue組件間通信六種方式（完整版）

    摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實(shí)例講述這其中的差別及使用場(chǎng)景，希望對(duì)小伙伴有些許幫助。狀態(tài)改變提交操作方法。 前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系：showImg(https://segmentfault.com/img/remote/146000001...

    frontoldman 評(píng)論0 收藏0

  • vue組件間通信六種方式（完整版）

    摘要：本文總結(jié)了組件間通信的幾種方式，如和，以通俗易懂的實(shí)例講述這其中的差別及使用場(chǎng)景，希望對(duì)小伙伴有些許幫助。狀態(tài)改變提交操作方法。前言 組件是 vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說，組件可以有以下幾種關(guān)系： showImg(https://user-gold-cdn.xitu.io/2019/5/17/16ac35bf...

    DDreach 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<