好看的網(wǎng)頁千篇一律，有趣的代碼萬里挑一。
編輯代碼就像創(chuàng)作藝術(shù)，享受個(gè)過程，最后得到心滿意足的結(jié)果。
今天繼續(xù)一起學(xué)習(xí)Vue組件——父子組件、第三方組件。
父子組件
? ? <div id="app">
? ? ? ? <h4>app</h4>
? ? ? ? <h4>姓名：{{name}}，年齡：{{age}}</h4>
? ? ? ? <button @click="updateCar">修改b-one的汽車</button>
? ? ? ? <button @click="updatePlane">修改b-two的飛機(jī)</button>
? ? ? ? <!-- 給組件標(biāo)簽添加一個(gè)ref屬性，然后就可以通過$refs返回?fù)碛衦ef屬性的組件 -->
? ? ? ? <b-one ref="one">
? ? ? ? ? ? <b-three></b-three>
? ? ? ? </b-one>
? ? ? ? <b-two ref="two"></b-two>
? ? </div>
? ? // 定義b-one組件
? ? Vue.component('b-one', {
? ? // 組件的模板中，只有包含一個(gè)根標(biāo)簽，
? ? // 注意：定義插槽后才能嵌套子組件
? ? template:`
? ? <div class="one">
? ? ? ? <h4>b-one</h4>
? ? ? ? <h4>{{car}}</h4>
? ? ? ? <h4>App----姓名：{{myname}}，年齡：{{myage}}</h4>
? ? ? ? <slot></slot>
? ? </div>
? ? `,
? ? data() {
? ? return {
? ? car:{
? ? name:'奔馳',
? ? price:'50W'
? ? }
? ? }
? ? },
? ? computed:{
? ? myname(){
? ? // $parent獲取父組件的實(shí)例
? ? return this.$parent.name
? ? },
? ? myage(){
? ? return this.$parent.age
? ? }
? ? },
? ? created() {
? ? console.log('b-one----created');
? ? },
? ? mounted() {
? ? console.log('b-one----mounted');
? ? },
? ? })
? ? // 定義b-two組件
? ? Vue.component('b-two', {
? ? template:`
? ? <div class="two">
? ? ? ? <h4>b-two</h4>
? ? ? ? <h4>{{plane}}</h4>
? ? </div>
? ? `,
? ? data() {
? ? return {
? ? plane:{
? ? name:'波音747',
? ? price:'20億'
? ? }
? ? }
? ? },
? ? })
? ? // 定義b-three組件
? ? Vue.component('b-three', {
? ? template:`
? ? <div class="three">
? ? ? ? <h4>b-three</h4>
? ? ? ? <h4>App----姓名：{{name}}，年齡：{{age}}</h4>
? ? </div>
? ? `,
? ? computed:{
? ? name(){
? ? // 通過$parent還可以繼續(xù)獲取它的父級(jí)組件
? ? return this.$parent.$parent.name
? ? },
? ? age(){
? ? // $root獲取根組件
? ? return this.$root.age
? ? }
? ? },
? ? created() {
? ? console.log('b-three----created');
? ? },
? ? mounted() {
? ? console.log('b-three----mounted');
? ? },
? ? })
? ? // 創(chuàng)建vue實(shí)例
? ? new Vue({
? ? el:'#app',
? ? // 注意觀察：在父組件創(chuàng)建完成到掛載完成之間，包含完整的子組件的生命周期
? ? created() {
? ? console.log('app----created');
? ? },
? ? mounted() {
? ? console.log('app----mounted');
? ? // 根據(jù)組件在頁面中的順序返回所有的組件
? ? console.log(this.$children);
? ? // 返回所有帶有ref屬性的組件
? ? console.log(this.$refs);
? ? },
? ? data() {
? ? return {
? ? name:'張三',
? ? age:20
? ? }
? ? },
? ? methods: {
? ? //修改汽車的方法
? ? updateCar(){
? ? // $children獲取的是所有子組件的實(shí)例，返回的是數(shù)組類型，再通過下標(biāo)獲取指定的子組件
? ? // 如果頁面的結(jié)構(gòu)出現(xiàn)了調(diào)整，這里獲取的具體的組件可以就對(duì)不上號(hào)了。
? ? /* this.$children[0].car = {
? ? name:'寶馬',
? ? price:'40W'
? ? } */
? ? // $refs對(duì)象中，保存著所有添加了ref屬性的組件實(shí)例
? ? this.$refs.one.car = {
? ? name:'寶馬',
? ? price:'40W'
? ? }
? ? },
? ? // 修改飛機(jī)的方法
? ? updatePlane(){
? ? /* this.$children[1].plane = {
? ? name:'長征2號(hào)',
? ? price:'30億'
? ? } */
? ? this.$refs.two.plane = {
? ? name:'長征2號(hào)',
? ? price:'30億'
? ? }
? ? }
? ? },
? ? })
第三方組件庫
1.?Element——網(wǎng)站快速成型工具
2.iview
3.Ant Design of Vue
4.移動(dòng)端的?Vant
自定義表格組件--仿iview
?<div id="app">
? ? ? ? <b-table :data="data1" :columns="columns1"></b-table>
? ? ? ? <hr>
? ? ? ? <b-table :data="data2" :columns="columns2"></b-table>
? ? </div>
? ? // 定義一個(gè)b-table組件
? ? Vue.component('b-table', {
? ? ? ? template:`
? ? ? ? <table>
? ? ? ? <tr>
? ? ? ? <th v-for="(item,index) in columns" :key="index">{{item.title}}</th>
? ? ? ? </tr>
? ? ? ? <tr v-for="(item,index) in data" :key="index">
? ? ? ? <td v-for="(item2,index2) in columns" :key="index2">{{item[item2.key]}}</td>
? ? ? ? </tr>
? ? ? ? </table>
? ? ? ? `,
? ? ? ? // 定義組件標(biāo)簽上的屬性，用于接收外部傳給組件的數(shù)據(jù)
? ? ? ? props:['data','columns'],
? ? })
? ? // 創(chuàng)建vue實(shí)例
? ? new Vue({
? ? ? ? el:'#app',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 表格的列數(shù)據(jù)
? ? ? ? ? ? ? ? columns1:[
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'姓名',
? ? ? ? ? ? ? ? ? ? ? ? key:'name'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'年齡',
? ? ? ? ? ? ? ? ? ? ? ? key:'age'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'性別',
? ? ? ? ? ? ? ? ? ? ? ? key:'sex'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'工資',
? ? ? ? ? ? ? ? ? ? ? ? key:'money'
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? // 表格數(shù)據(jù)
? ? ? ? ? ? ? ? data1:[{
? ? ? ? ? ? ? ? ? ? name:'張三',
? ? ? ? ? ? ? ? ? ? age:20,
? ? ? ? ? ? ? ? ? ? sex:'男',
? ? ? ? ? ? ? ? ? ? money:10000
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? name:'李四',
? ? ? ? ? ? ? ? ? ? age:22,
? ? ? ? ? ? ? ? ? ? sex:'女',
? ? ? ? ? ? ? ? ? ? money:20000
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? name:'王五',
? ? ? ? ? ? ? ? ? ? age:24,
? ? ? ? ? ? ? ? ? ? sex:'女',
? ? ? ? ? ? ? ? ? ? money:30000
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? columns2:[
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'編號(hào)',
? ? ? ? ? ? ? ? ? ? ? ? key:'id'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'車名',
? ? ? ? ? ? ? ? ? ? ? ? key:'name'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? title:'產(chǎn)地',
? ? ? ? ? ? ? ? ? ? ? ? key:'address'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? // 表格數(shù)據(jù)2
? ? ? ? ? ? ? ? data2:[{
? ? ? ? ? ? ? ? ? ? id:'1001',
? ? ? ? ? ? ? ? ? ? name:'奔馳',
? ? ? ? ? ? ? ? ? ? address:'德國'
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? id:'1002',
? ? ? ? ? ? ? ? ? ? name:'紅旗',
? ? ? ? ? ? ? ? ? ? address:'中國'
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? id:'1003',
? ? ? ? ? ? ? ? ? ? name:'捷豹',
? ? ? ? ? ? ? ? ? ? address:'英國'
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? }
? ? ? ? },
? ? })
?自定義表格組件--仿element-ui
? <div id="app">
? ? ? ? <b-table :data="data1">
? ? ? ? ? ? <b-table-column prop="name" label="姓名"></b-table-column>
? ? ? ? ? ? <b-table-column prop="age" label="年齡"></b-table-column>
? ? ? ? ? ? <b-table-column prop="sex" label="性別"></b-table-column>
? ? ? ? ? ? <b-table-column prop="money" label="工資"></b-table-column>
? ? ? ? </b-table>
? ? ? ? <hr>
? ? ? ? <b-table :data="data2">
? ? ? ? ? ? <b-table-column prop="id" label="編號(hào)"></b-table-column>
? ? ? ? ? ? <b-table-column prop="name" label="車名"></b-table-column>
? ? ? ? ? ? <b-table-column prop="address" label="產(chǎn)地"></b-table-column>
? ? ? ? </b-table>
? ? </div>
? // 定義一個(gè)b-table-column組件
? ? Vue.component('b-table-column', {
? ? ? ? template:`
? ? ? ? <th>{{label}}</th>
? ? ? ? `,
? ? ? ? props:['prop','label'],
? ? ? ? mounted() {
? ? ? ? ? ? // 子組件掛載完成時(shí)，將獲取到的屬性的名稱，添加到父組件的columns數(shù)組中。
? ? ? ? ? ? this.$parent.columns.push(this.prop)
? ? ? ? },
? ? })
? ? // 定義一個(gè)b-table組件
? ? Vue.component('b-table', {
? ? ? ? template:`
? ? ? ? <table>
? ? ? ? <tr>
? ? ? ? <slot></slot>
? ? ? ? </tr>
? ? ? ? <tr v-for="(item,index) in data" :key="index">
? ? ? ? <td v-for="(item2,index2) in columns" :key="index2">{{item[item2]}}</td>
? ? ? ? </tr>
? ? ? ? </table>
? ? ? ? `,
? ? ? ? // 定義組件標(biāo)簽上的屬性，用于接收外部傳給組件的數(shù)據(jù)
? ? ? ? props:['data'],
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 該數(shù)組存放屬性的名稱
? ? ? ? ? ? ? ? columns:[]
? ? ? ? ? ? }
? ? ? ? },
? ? })
? ? // 創(chuàng)建vue實(shí)例
? ? new Vue({
? ? ? ? el:'#app',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 表格數(shù)據(jù)
? ? ? ? ? ? ? ? data1:[{
? ? ? ? ? ? ? ? ? ? name:'張三',
? ? ? ? ? ? ? ? ? ? age:20,
? ? ? ? ? ? ? ? ? ? sex:'男',
? ? ? ? ? ? ? ? ? ? money:10000
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? name:'李四',
? ? ? ? ? ? ? ? ? ? age:22,
? ? ? ? ? ? ? ? ? ? sex:'女',
? ? ? ? ? ? ? ? ? ? money:20000
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? name:'王五',
? ? ? ? ? ? ? ? ? ? age:24,
? ? ? ? ? ? ? ? ? ? sex:'女',
? ? ? ? ? ? ? ? ? ? money:30000
? ? ? ? ? ? ? ? }],
? ? ? ? ? ? ? ? // 表格數(shù)據(jù)2
? ? ? ? ? ? ? ? data2:[{
? ? ? ? ? ? ? ? ? ? id:'1001',
? ? ? ? ? ? ? ? ? ? name:'奔馳',
? ? ? ? ? ? ? ? ? ? address:'德國'
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? id:'1002',
? ? ? ? ? ? ? ? ? ? name:'紅旗',
? ? ? ? ? ? ? ? ? ? address:'中國'
? ? ? ? ? ? ? ? },{
? ? ? ? ? ? ? ? ? ? id:'1003',
? ? ? ? ? ? ? ? ? ? name:'捷豹',
? ? ? ? ? ? ? ? ? ? address:'英國'
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? }
? ? ? ? },
? ? })
