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

当前位置:

首页 > temp > JavaScript教程 >

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:'<h1>自定义组件!</h1>'
            })
            
            new Vue({
                el:'#app'
            })
        </script>

2.局部组件：

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

<div id="app">
            <cc></cc>
</div>
        <script type="text/javascript">
            var Child = {
              template: '<h1>自定义组件!</h1>'
            };
            new Vue({
                el:'#app',
                components:{
                    'cc':Child
                }
            })
        </script>

3.参数：props

传递参数给组件

<body>
        <div id="app">
            <aaa mess="abcd"></aaa>
            <aaa></aaa>
        </div>
        <script>
            Vue.component('aaa',{
                props:['mess'],
                template:'<h1>---{{mess}}----</h1>'
            })
            
            new Vue({
                el:'#app'
            })
        </script>
    </body>

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: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

栏目列表