vue2.0筆記《二》組件

時間 2019-11-30

標籤 vue2.0 vue 筆記組件简体版

原文原文鏈接

主要內容：如何註冊組件、如何使用組件、父組件子組件之間值的傳遞、具名插槽html

1.如何註冊組件

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

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

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

  components: {
    child,
    childB
  },

若是想給引入的組建從新命名，那麼：web

  components: {
    新名字:child
  },

2.如何使用組件

引入組件的第一種寫法app

<template>
  <div id="app">
    <!-- 若是註冊的組建名中有大寫字母，儘可能改成 -小寫字母，例如：
     childB,則在使用組件時，要用：<child-b></child-b>-->
    <child></child>
    <child-b></child-b>
  </div>
</template>

引入組件的第二種寫法ide

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

優勢：函數

1.DOM 模板解析注意事項ui

2.能夠動態切換組建經過v-bind:isthis

實例：spa

父組件：app.vue

<!-- 父組件如何加渲染子組 -->
<template>
  <div id="app">
    <!-- 第三步：使用組件 -->
    <!-- 引入組件的第一種寫法 -->
    <!-- 若是註冊的組建名中有大寫字母，儘可能改成 -小寫字母，例如：
     childB,則在使用組件時，要用：<child-b></child-b>-->
    <!-- <child></child>
    <child-b></child-b> -->
    <!--引入組件的第二種寫法-->
    <!-- 優勢：
      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%B9
      2.能夠動態切換組建 經過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 傳遞數據

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屬性內容的簡寫：
  props:['number'],
  data() {
    return {
      msg: 'I am a components'
    }
  },
  methods: {
    emitMyEvent() {
      this.$emit('my-event', this.msg);
    }
  }
}

</script>

注意：若是傳遞的參數存在大寫字母

父組件：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屬性內容的簡寫：
  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.動態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屬性內容的簡寫：
  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 也能夠是一個自定義構造器函數，使用 instanceof 檢測。

當 prop 驗證失敗，Vue 會拋出警告 (若是使用的是開發版本)。注意 prop 會在組件實例建立以前進行校驗，因此在 default 或 validator 函數裏，諸如 data、computed 或 methods 等實例屬性還沒法使用。

父組件：app.vue

<template>
  <div id="app">
    <!-- number-to-do不傳，則子組件的使用默認值 -->
    <child @my-event="onChildEvent"></child>
    <!-- 子組件中定義number-to-do type: Number ，若是傳入不是number類型的參數，則會報錯-->
    <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>

經過以上實例，發現子組件改變父組件的值是經過：子組件經過this.$emit監聽父組件的 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>子組件內容</p>
    <slot name='footer'>no header</slot>
  </div>
</template>