Vue(八)---组件(Component)

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

注册一个全局组件语法格式如下:

Vue.component(tagName, options)

tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:

<tagName>tagName>

1.全局组件:

  所有实例都能用全局组件

<div id="app">
            <aaa>aaa>
            <aaa>aaa>
div>
        
        <script>
            Vue.component('aaa',{
                template:'

自定义组件!

' }) new Vue({ el:'#app' }) script>

Vue(八)---组件(Component)_第1张图片

 

 

2.局部组件:

  在实例选项中注册局部组件,这样组件只能在这个实例中使用

<div id="app">
            <cc>cc>
div>
        <script type="text/javascript">
            var Child = {
              template: '

自定义组件!

' }; new Vue({ el:'#app', components:{ 'cc':Child } }) script>

Vue(八)---组件(Component)_第2张图片

 

3.参数:props 

传递参数给组件

<body>
        <div id="app">
            <aaa mess="abcd">aaa>
            <aaa>aaa>
        div>
        <script>
            Vue.component('aaa',{
                props:['mess'],
                template:'

---{{mess}}----

' }) new Vue({ el:'#app' }) script> body>

Vue(八)---组件(Component)_第3张图片

 

 

4.动态参数

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg">child>
    div>
div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '{{ message }}'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
script>

 

你可能感兴趣的:(Vue(八)---组件(Component))