Vue组件的使用及个人理解与介绍

 Vue.component('mycomponent',{
  template: `<div>这是一个自定义组件</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>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
   }
  }
 })
</script>

var app = new Vue({
  el: '#app',
  data: {
  },
  components: {
   'my-component': {
    template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>`,
   }
  }
 })

template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</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>这是一个自定义组件,父组件传给我的内容是：{{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">
      点击我改变父元素的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 }
}

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

<!-- 传递实际的 number 1 -->
<comp v-bind:some-prop="1"></comp>

Vue.component('example', {
 props: {
  // 基础类型检测 (`null` 意思是任何类型都可以)
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字，有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组/对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})

 // 自定义Person构造器
 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   // 指定类型
   }
  }
 })
 new Vue({
  el: '#app2',
  data: {
   person: 2    // 传入Number类型会报错
  }
 })

<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">点击我触发自定义事件</button>
  </div>`,
  methods: {
   childClick () {
    this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据2')
   }
  }
 })
 new Vue({
  el: '#app3',
  methods: {
   onClick () {
    console.log(arguments)
   }
  }
 })
</script>

this.$emit('myclick', '这是我暴露出去的数据', '这是我暴露出去的数据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'    // 触发的自定义事件类型为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)  // 事件类型改变
     this.$refs.input.value = hello
    } else {
     this.$emit('change', value) // 事件类型改变
    }
   }
  }
 })

 <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">
  <!-- 非活动组件将被缓存！ -->
 </component>
</keep-alive>

<component></component>

<div>
 <h2>我是子组件的标题</h2>
 <slot>
  只有在没有要分发的内容时才会显示。
 </slot>
</div>

<div>
 <h1>我是父组件的标题</h1>
 <my-component>
  <p>这是一些初始内容</p>
 </my-component>
</div>

<div>
 <h1>我是父组件的标题</h1>
 <div>
  <h2>我是子组件的标题</h2>
  <p>这是一些初始内容</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">这里可能是一个页面标题</h1>
 <p>主要内容的一个段落。</p>
 <p>另一个主要段落。</p>
 <p slot="footer">这里有一些联系信息</p>
</app-layout>

<div class="container">
 <header>
  <h1>这里可能是一个页面标题</h1>
 </header>
 <main>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
 </main>
 <footer>
  <p>这里有一些联系信息</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>