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

时间 2020-02-03

标签 vue 组件 component 繁體版

原文原文链接

组件（Component）是 Vue.js 最强大的功能之一。组件能够扩展 HTML 元素，封装可重用的代码。javascript

注册一个全局组件语法格式以下：java

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，咱们可使用如下方式来调用组件：app

<tagName></tagName>

1.全局组件：this

　　全部实例都能用全局组件spa

<div id="app">
            <aaa></aaa>
            <aaa></aaa>
</div>
        
        <script>
            Vue.component('aaa',{
                template:'<h1>自定义组件!</h1>'
            })
            
            new Vue({
                el:'#app'
            })
        </script>

2.局部组件：3d

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

<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 component

传递参数给组件blog

<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.动态参数ip

<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>