Vue之組件及組件通信

組件之全域組件

//注意：需要在Vue實體化之前注冊全域組件，使用Vue.component("組件名",{ template:`組件模板` })
Vue.component("show-name",{
    template:`
	<div title="注意, 組件模板的根元素必須有且只有一個">
	<p>ViavaCos</p>
	</div>
	`
})

var vm = new Vue({
    el:'#app',
    data:{
        name:'ViavaCos'
    },
    methods:{}
})

組件之區域組件

// 套路和全域組件一樣，這兩者只是注冊的位置不同，作用的范圍也不一樣罷了 使用components選項來注冊區域
var vm = new Vue({
    el:'#app',
    data:{},
    components:{
        'show-name':{
            template:`
      	    <div title="注意, 組件模板的根元素必須有且只有一個">
            	<p>ViavaCos</p>
            </div>
		`
        }
    }
})

組件通信之父組件傳遞值給子組件

// 父組件傳遞值給子組件通過自定義屬性傳遞，然后子組件通過porps選項來接收所傳遞過來的值

一共三個步驟：

1. 在子組件的自定義標簽上設定自定義屬性，值為父組件需要從傳遞的值(變數)

2. 在子組件的實體上設定一個叫props的屬性，用來接收父組件傳遞過來的值，props選項是一個字串陣列

3. 由于props選項也被vue實體代理了，所以直接在當前子組件實體中使用this.自定義屬性名就可使用了

    <div id="app">
        // 1. 設定自定義屬性
        <show-city :city="city"></show-city>
    </div>
    <script src="https://www.cnblogs.com/ViavaCos/p/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                city: ["北京", "上海", "天津"]
            },
            methods: {},
            components: {
                'show-city': {
                    // 3.使用
                    template: `
                    <div>
                        <p v-for="item in city">{{item}}</p>
                    </div>
                    `,
                    // 2.接收值
                    props: ['city']
                }
            }
        });
    </script>
   

組件通信之子組件傳遞給父組件

一共五個步驟：

1. 在子組件的組件模板上設定一個點擊事件，用來觸發自定義事件用于傳值

2. 在子組件的methods中設定點擊事件的事件處理程式：內容為執行自定義事件this.$emit("自定義事件名", 若干個引數)

3. 在父組件管理的視圖，也就是書寫子組件的自定義標簽的地方，在這個標簽上設定自定義事件的監聽(用v-on指令就行)

4. 提前在父組件的資料物件data中定義一個容器來接收子組件傳遞過來的值

5. 在父組件的methods中設定監聽自定義事件的事件處理程式：由于事件觸發了，會有寫好的若干個引數傳遞過來，所以在這里處理一下，將傳遞來的值用方才定義好的容器接收，然后就可以放心使用這個子組件傳遞來的值了

     <div id="app">
            <!-- 3. 監聽事件 -->
            <show-city @getcity='exeCity' v-for="item in city" :city="item" :tcity="tcity"></show-city>
        </div>
   
   
    <script src="https://www.cnblogs.com/ViavaCos/p/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                city: ["北京", "上海", "天津"],
                // 4. 定義容器接收
                tcity: ''
            },
            methods: {
                // 5. 賦值給tcity這個容器
                exeCity(data) {
                    this.tcity = data;
                }
            },
            components: {
                'show-city': {
                    // 1. 設定自定義事件
                    template: `
                    <div>
                        <p @click="toFather" : >{{city}}</p>
                        <input text="text" v-model="isSelect">
                    </div>
                    `,
                    props: ['city', 'tcity'],
                    methods: {
                        toFather() {
                            // 2. 觸發自定義事件
                            console.log('被點擊了')
                            this.$emit('getcity', this.city);
                        },
                    },
                    computed: {
                        isSelect() {
                            return this.city === this.tcity;
                        }
                    }
                }
   
            }
        });
    </script>

標籤：JavaScript

上一篇：打造屬于自己的 HTML/CSS/JavaScript 實時編輯器

下一篇：Vue使用vue-recoure + http-proxy-middleware + vuex配合promise實作基本的跨域請求封裝