Vue組件的使用及個(gè)人理解與介紹

 Vue.component('mycomponent',{
 template: `<div>這是一個(gè)自定義組件</div>`,
 data () {
 return {
 message: 'hello world'
 }
 }
 })

 <div id="app">
 <mycomponent></mycomponent>
 <my-component></my-component>
</div>
<script>
 var app = new Vue({
 el: '#app',
 data: {
 },
 components: {
 'my-component': {
 template: `<div>這是一個(gè)局部的自定義組件，只能在當(dāng)前Vue實(shí)例中使用</div>`,
 }
 }
 })
</script>

var app = new Vue({
 el: '#app',
 data: {
 },
 components: {
 'my-component': {
 template: `<div>這是一個(gè)局部的自定義組件，只能在當(dāng)前Vue實(shí)例中使用</div>`,
 }
 }
 })

template: `<div>這是一個(gè)局部的自定義組件，只能在當(dāng)前Vue實(shí)例中使用</div>
 <button>hello</button>`,

<table>
 <my-row>...</my-row>
</table>

<table>
 <tr is="my-row"></tr>
</table>

<my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component>

Vue.component('mycomponent',{
 template: '<div>這是一個(gè)自定義組件,父組件傳給我的內(nèi)容是：{{myMessage}}</div>',
 props: ['myMessage'],
 data () {
 return {
 message: 'hello world'
 }
 }
 })

<div id="app">
 <mycomponent my-message="hello"></mycomponent>
</div>

<div attr="message">hello</div>

<div v-bind:attr="message">hello</div>

 <div id="app2">
 <div>這是父組件的parentArray：{{parentArray}}</div>
 <my-component :child-array="parentArray"></my-component>
 </div>
 <script>
 Vue.component('my-component', {
 template: `
 <div>這是接收了父組件傳遞值的子組件的childArray: {{childArray}} <br>
 <button type="button" @click="changeArray">
 點(diǎn)擊我改變父元素的parentArray</button>
 </div>`,
 props: ['childArray'],
 data () {
 return {
 counter: 1
 }
 },
 methods: {
 changeArray () {
 this.childArray.push(this.counter++)
 }
 }
 })
 new Vue({
 el: '#app2',
 data: {
 parentArray: []
 }
 })
 </script>

<my-component :child-array.sync="parentArray"></my-component>

 methods: {
 changeArray () {
 this.counter++
 this.$emit('update:childArray', this.counter)
 }
 }

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

<!-- 傳遞了一個(gè)字符串 "1" -->
<comp some-prop="1"></comp>

<!-- 傳遞實(shí)際的 number 1 -->
<comp v-bind:some-prop="1"></comp>

Vue.component('example', {
 props: {
 // 基礎(chǔ)類(lèi)型檢測(cè) (`null` 意思是任何類(lèi)型都可以)
 propA: Number,
 // 多種類(lèi)型
 propB: [String, Number],
 // 必傳且是字符串
 propC: {
 type: String,
 required: true
 },
 // 數(shù)字，有默認(rèn)值
 propD: {
 type: Number,
 default: 100
 },
 // 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
 propE: {
 type: Object,
 default: function () {
 return { message: 'hello' }
 }
 },
 // 自定義驗(yàn)證函數(shù)
 propF: {
 validator: function (value) {
 return value > 10
 }
 }
 }
})

 // 自定義Person構(gòu)造器
 function Person(name, age) {
 this.name = name
 this.age = age
 }
 Vue.component('my-component', {
 template: `<div>名字: {{ person-prop.name }}， 年齡： {{ person-prop.age }} </div>`,
 props: {
 person-prop: {
 type: Person // 指定類(lèi)型
 }
 }
 })
 new Vue({
 el: '#app2',
 data: {
 person: 2 // 傳入Number類(lèi)型會(huì)報(bào)錯(cuò)
 }
 })

<div id="app3">
 <my-component2 att="helloParent"></my-component2>
</div>
<script>
 Vue.component('my-component2', {
 template: `<div att="helloChild">子組件原有的特性被覆蓋了</div>`
 })
 new Vue({
 el: '#app3'
 })
</script>

<div id="app3">
 <my-component2 att="helloParent" class="class2" style="color: red;"></my-component2>
</div>
<script>
 Vue.component('my-component2', {
 template: `<div att="helloChild" class="class1" style="background: yellow;">子組件原有的特性被覆蓋了</div>`
 })
 new Vue({
 el: '#app3'
 })
</script>

<div id="app3">
 <my-component2 v-on:myclick="onClick"></my-component2>
</div>
<script>
 Vue.component('my-component2', {
 template: `<div>
 <button type="button" @click="childClick">點(diǎn)擊我觸發(fā)自定義事件</button>
 </div>`,
 methods: {
 childClick () {
 this.$emit('myclick', '這是我暴露出去的數(shù)據(jù)', '這是我暴露出去的數(shù)據(jù)2')
 }
 }
 })
 new Vue({
 el: '#app3',
 methods: {
 onClick () {
 console.log(arguments)
 }
 }
 })
</script>

this.$emit('myclick', '這是我暴露出去的數(shù)據(jù)', '這是我暴露出去的數(shù)據(jù)2')

<my-component2 v-on:myclick="onClick"></my-component2>

<my-component v-on:click.native="doTheThing"></my-component>

<div id="app4">
 <input type="text" v-bind:value="text" v-on:input="changeValue($event.target.value)">
 {{text}}
 </div>
 <script>
 new Vue({
 el: '#app4',
 data: {
 text: '444'
 },
 methods: {
 changeValue (value) {
 this.text = value
 }
 }
 })
 </script>

<div id="app5">
 <my-component3 v-model="hello"></my-component3>
 <div>{{hello}}</div>
</div>
<script>
 Vue.component('my-component3', {
 template: `<input ref="input" type="text" :value="value" @input="checkInput($event.target.value)">`,
 props: ['value'],
 methods: {
 checkInput (value) {
 var hello = 'hello'
 if (!hello.includes(value)) {
 this.$emit('input', hello)
 this.$refs.input.value = hello
 } else {
 this.$emit('input', value)
 }
 }
 }
 })
 new Vue({
 el: '#app5',
 data: {
 hello: ''
 }
 })
</script>

Vue.component('my-checkbox', {
 model: {
 prop: 'checked', // 將輸入的特性改為checked
 event: 'change' // 觸發(fā)的自定義事件類(lèi)型為change
 },
 props: {
 checked: Boolean,
 // this allows using the `value` prop for a different purpose
 value: String
 }
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"></my-checkbox>

Vue.component('my-component3', {
 template: `<input ref="input" type="text" :value="checked" @input="checkInput($event.target.value)">`,
 props: ['checked'], // 屬性名改變
 model: {
 prop: 'checked',
 event: 'change'
 },
 methods: {
 checkInput (value) {
 var hello = 'hello'
 if (!hello.includes(value)) {
 this.$emit('change', hello) // 事件類(lèi)型改變
 this.$refs.input.value = hello
 } else {
 this.$emit('change', value) // 事件類(lèi)型改變
 }
 }
 }
 })

 <div id="app6">
 <select v-model="currentComponent">
 <option value="home">home</option>
 <option value="post">post</option>
 <option value="about">about</option>
 </select>
 <component :is="currentComponent"></component>
 </div>
 <script>
 new Vue({
 el: '#app6',
 data: {
 currentComponent: 'home'
 },
 components: {
 home: {
 template: `<header>這是home組件</header>`
 },
 post: {
 template: `<header>這是post組件</header>`
 },
 about: {
 template: `<header>這是about組件</header>`
 }
 }
 })
</script>

var Home = {
 template: `<header>這是home組件</header>`
}
new Vue({
 el: '#app6',
 data: {
 currentComponent: Home
 }
})

<keep-alive>
 <component :is="currentComponent">
 <!-- 非活動(dòng)組件將被緩存！ -->
 </component>
</keep-alive>

<component></component>

<div>
 <h2>我是子組件的標(biāo)題</h2>
 <slot>
 只有在沒(méi)有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示。
 </slot>
</div>

<div>
 <h1>我是父組件的標(biāo)題</h1>
 <my-component>
 <p>這是一些初始內(nèi)容</p>
 </my-component>
</div>

<div>
 <h1>我是父組件的標(biāo)題</h1>
 <div>
 <h2>我是子組件的標(biāo)題</h2>
 <p>這是一些初始內(nèi)容</p>
 </div>
</div>

<div class="container">
 <header>
 <slot name="header"></slot>
 </header>
 <main>
 <slot></slot>
 </main>
 <footer>
 <slot name="footer"></slot>
 </footer>
</div>

<app-layout>
 <h1 slot="header">這里可能是一個(gè)頁(yè)面標(biāo)題</h1>
 <p>主要內(nèi)容的一個(gè)段落。</p>
 <p>另一個(gè)主要段落。</p>
 <p slot="footer">這里有一些聯(lián)系信息</p>
</app-layout>

<div class="container">
 <header>
 <h1>這里可能是一個(gè)頁(yè)面標(biāo)題</h1>
 </header>
 <main>
 <p>主要內(nèi)容的一個(gè)段落。</p>
 <p>另一個(gè)主要段落。</p>
 </main>
 <footer>
 <p>這里有一些聯(lián)系信息</p>
 </footer>
</div>

 Vue.component('my-component4', {
 template: `<div>
 <slot :text="hello" message="world"></slot>
 </div>`,
 data () {
 return {
 hello: [1,'2']
 }
 }
 })

<div id="app7">
 <my-component4>
 <template scope="props">
 </template>
 </my-component4>
 </div>

props = {
 text: '',
 message: ''
}

 <div id="app7">
 <my-component4>
 <template slot-scope="props">
 <span>{{props.text}}</span>
 <span>{{props.message}}</span>
 </template>
 </my-component4>
 </div>

 <div id="app7">
 <my-component4>
 <template slot-scope="{text, message}">
 <span>{{text}}</span>
 <span>{{message}}</span>
 </template>
 </my-component4>
 </div>