VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript教程 >
  • 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>
复制代码

相关教程