?主要內(nèi)容：如何注冊組件、如何使用組件、父組件子組件之間值的傳遞、具名插槽

1.如何注冊組件

第一步：通過import將子組件載入父組件的js中

// 第一步：通過import將子組件載入父組件的js中 import child from './components/child.vue' import childB from './components/childB.vue'

第二步：將子組件在父組件的componerts中注冊

components: {child,childB},

如果想給引入的組建重新命名，那么：

components: {新名字:child},

2.如何使用組件

引入組件的第一種寫法

<template><div id="app"><!-- 如果注冊的組建名中有大寫字母，盡量改為 -小寫字母，例如：childB,則在使用組件時，要用：<child-b></child-b>--><child></child><child-b></child-b></div> </template>

引入組件的第二種寫法

<template><div id="app"><div :is="comToRender" @my-event="onChildEvent"></div><button @click="changeFun">切換組建</button></div> </template>

優(yōu)點：

1.DOM 模板解析注意事項

2.可以動態(tài)切換組建 通過v-bind:is

實例：

目錄：

父組件：app.vue

<!-- 父組件如何加渲染子組 --> <template><div id="app"><!-- 第三步：使用組件 --><!-- 引入組件的第一種寫法 --><!-- 如果注冊的組建名中有大寫字母，盡量改為 -小寫字母，例如：childB,則在使用組件時，要用：<child-b></child-b>--><!-- <child></child><child-b></child-b> --><!--引入組件的第二種寫法--><!-- 優(yōu)點：1.https://cn.vuejs.org/v2/guide/components.html#DOM-%E6%A8%A1%E6%9D%BF%E8%A7%A3%E6%9E%90%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B92.可以動態(tài)切換組建 通過v-bind:is--><div :is="comToRender" @my-event="onChildEvent"></div><button @click="changeFun">切換組建</button></div> </template> <script> // 第一步：通過import將子組件載入父組件的js中 import child from './components/child.vue' import childB from './components/childB.vue' export default {name: 'app',// 第二步：將子組件在父組件的componerts中注冊// 如果想給引入的組建重新命名，那么：// components: {// 新名字:child// }, components: {child,childB},data() {return {comToRender: 'child',fatherString:'hello children',parameterNum:'1'}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);},changeFun(){this.comToRender="childB";}} }</script> <style> * {margin: 0;padding: 0; }body {width: 100%;height: 100%;position: absolute; }#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;width: 100%;height: 100%; }</style>

子組件：child.vue

<template><div class="child-conten"><p>{{msg}}</p><button @click='emitMyEvent'>child-emit</button></div> </template> <script> export default { data() {return {msg: 'I am a components'}},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}} }</script>

子組件：childB.vue

<template><div class="child-conten"><p>{{msg}}</p><button @click='emitMyEvent'>child-emit</button></div> </template> <script> export default {data(){return{msg: 'I am a components children B'}},methods:{emitMyEvent(){this.$emit('my-event',this.msg);}} }</script>

頁面效果：

3.父組件子組件之間值的傳遞

使用 Prop 傳遞數(shù)據(jù)

1.傳遞固定值：

父組件：app.vue

<template><div id="app"><child number="5" @my-event="onChildEvent"></child></div> </template> <script> // 第一步：通過import將子組件載入父組件的js中 import child from './components/child.vue' export default {name: 'app',components: {child},data() {return {}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);}} }</script>

子組件：child.vue

<template><div class="child-conten"><p>{{msg}}</p><p>我是父組件傳遞過來的值：{{number}}</p><button @click='emitMyEvent'>child-emit</button></div> </template> <script> export default {// props屬性內(nèi)容的簡寫： props:['number'],data() {return {msg: 'I am a components'}},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}} }</script>

注意：如果傳遞的參數(shù)存在大寫字母

父組件：app.vue

<template><div id="app"><child number-to-do="5" @my-event="onChildEvent"></child></div> </template>

子組件：child.vue

<template><div class="child-conten"><p>{{msg}}</p><p>我是父組件傳遞過來的值：{{numberToDo}}</p><button @click='emitMyEvent'>child-emit</button></div> </template> <script> export default {// props屬性內(nèi)容的簡寫： props: ['number-to-do'],data() {return {msg: 'I am a components'}},// 注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等// 到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted： mounted: function() {this.$nextTick(function() {console.log('this.numberToDo：' + this.numberToDo);})},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}} }</script>

2.動態(tài)prop：

父組件：app.vue

<template><div id="app"><input type="text" v-model="fatherString"><child :number-to-do='fatherNum' :string='fatherString' @my-event="onChildEvent"></child></div> </template> <script> // 第一步：通過import將子組件載入父組件的js中 import child from './components/child.vue' export default {name: 'app',components: {child},data() {return {fatherNum:100,fatherString:'hello children'}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);}} }</script>

子組件：child.vue

<template><div class="child-conten"><p>{{msg}}</p><p>我是父組件傳遞過來的值：{{numberToDo}}</p><p>我是父組件傳遞過來的值：{{string}}</p><button @click='emitMyEvent'>child-emit</button></div> </template> <script> export default {// props屬性內(nèi)容的簡寫： props: ['number-to-do', 'string'],data() {return {msg: 'I am a components'}},// 注意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等// 到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted： mounted: function() {this.$nextTick(function() {console.log('this.numberToDo：' + this.numberToDo);})},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}} }</script>

頁面效果：

?3.Prop 驗證

type 可以是下面原生構造器：

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

type 也可以是一個自定義構造器函數(shù)，使用 instanceof 檢測。

當 prop 驗證失敗，Vue 會拋出警告 (如果使用的是開發(fā)版本)。注意 prop 會在組件實例創(chuàng)建之前進行校驗，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實例屬性還無法使用。

父組件：app.vue

<template><div id="app"><!-- number-to-do不傳，則子組件的使用默認值 --><child @my-event="onChildEvent"></child><!-- 子組件中定義number-to-do type: Number ，如果傳入不是number類型的參數(shù)，則會報錯--><child :number-to-do='fatherNum' @my-event="onChildEvent"></child></div> </template> <script> // 第一步：通過import將子組件載入父組件的js中 import child from './components/child.vue' export default {name: 'app',components: {child},data() {return {fatherNum: 2,}},mounted: function() {this.$nextTick(function() {});},methods: {onChildEvent(parmFromChild) {console.log(parmFromChild);}} }</script>

子組件：child.vue

<template><div class="child-conten"><p>{{msg}}</p><p>我是父組件傳遞過來的值：{{numberToDo}}</p><button @click='emitMyEvent'>child-emit</button></div> </template> <script> export default {props: {'number-to-do': {type: Number,default: 100}},data() {return {msg: 'I am a components'}},methods: {emitMyEvent() {this.$emit('my-event', this.msg);}} }</script>

通過以上實例，發(fā)現(xiàn)子組件改變父組件的值是通過：子組件通過this.$emit監(jiān)聽父組件的 my-event，將子組件的值傳遞給父組件。

4.具名插槽

父組件：

<template><div id="app"><input type="text" v-model="fatherString"><child :number-to-do='fatherNum' :string='fatherString' @my-event="onChildEvent"><p slot='header'>xxxxx header</p><p slot='footer'>xxxxx footer</p></child></div> </template>

子組件:

<template><div class="child-conten"><p>{{msg}}</p><!-- <p>我是父組件傳遞過來的值：{{numberToDo}}</p><p>我是父組件傳遞過來的值：{{string}}</p> --><button @click='emitMyEvent'>child-emit</button><br><slot name='header'>no header</slot><p>子組件內(nèi)容</p><slot name='footer'>no header</slot></div> </template>

頁面效果：

?

git地址：vue2.0Demo

?

轉載于:https://www.cnblogs.com/yingzi1028/p/8250876.html

總結

以上是生活随笔為你收集整理的vue2.0笔记《二》组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。