Vue2 （1）组件化

最新推荐文章于 2024-11-18 18:25:00 发布

原创最新推荐文章于 2024-11-18 18:25:00 发布 · 348 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-js #组件化 #web

web前端专栏收录该内容

8 篇文章

订阅专栏

1.组件注册

创建组件构造器 ==》注册组件 ==》实例化组件

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>Vue注册</title>
    </head>
    <div id="container">
      <component1></component1>
      <component2></component2>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    // 1. 创建一个组件构造器
    var component1 = Vue.extend({
      template: '<div>hello world</div>'
    });
    // 2. 注册组件，并指定组件的标签为<component1>
    Vue.component('component1', component1);

    // 3. 实例化组件
    new Vue({
      el: '#container'
    });

    //注：此时的component1是*全局*组件，若想实例化*局部*组件component2:
    new Vue({
      el: '#container1',
      components: {
        'component2': component2
      }
    });
  </script>
</html>

2.父子组件

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>Vue父子</title>
    </head>
    <div id="container1">
      <parent-component></parent-component>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    // 1. 创建一个组件构造器
    var Child = Vue.extend({
      template: '<div>hello world</div>'
    });

    var Parent = Vue.extend({
      // 在组件内部使用<child-component>组件
      template: '<div>hello world <child-component></child-component></div>',
      components: {
        // 局部注册Child组件
        'child-component': Child
      }
    });
    // 全局注册Parent组件
    Vue.component('parent-component', Parent);

    // 实例化组件
    new Vue({
      el: '#container1'
    })
  </script>
</html>

3. 组件注册简化

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>组件注册简化</title>
    </head>
    <div id="container1">
      <component1></component1>
    </div>
    <div id="container2">
      <component2></component2>
      <component3></component3>
    </div>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    // 全局注册
    Vue.component('component1', {
      template: '<div>hello world Andy</div>'
    });

    // 实例化
    var vm1 = new Vue({
      el: '#container1'
    });

    // 实例化 局部注册
    var vm1 = new Vue({
      el: '#container2',
      components: {
        // 局部注册， component2 是标签名称
        'component2': {
          template: '<div>component2</div>'
        },
        // 局部注册，component3 是标签名称
        'component3': {
          template: '<div>component3</div>'
        }
      }
    });
  </script>
</html>

4. template标签

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>template标签</title>
    </head>

    <div id="container1">
      <component1></component1>
    </div>

    <template id="myComponent">
      <div>hello world Andy!!!!!</div>
    </template>

  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#container1',
      components: {
      // 子组件注册
        'component1': {
          template: '#myComponent'
        }
      }
    })
  </script>
</html>

5. 父子传值props

父组件使用props把数据传给子组件，反之如果子组件修改了数据，对父组件是没有影响的

<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>父子传值</title>
    </head>
    <div id="container1">
      <component1 v-bind:my-name="name" v-bind:my-age="age"></component1>
    </div>
    <template id="myComponent">
      <table>
        <tr>
          <th colspan="2">
            子组件数据
          </th>
        </tr>
        <tr>
          <td>myName</td>
          <td>{{ myName }}</td>
        </tr>
        <tr>
          <td>myAge</td>
          <td>{{ myAge }}</td>
        </tr>
      </table>
    </template>
  </body>
  <script src="./vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: '#container1',
      data: {
        name: 'longen',
        age: 30
      },
      components: {
      // 父组件中申明props参数
        'component1': {
          template: '#myComponent',
          props: ['myName', 'myAge']
        }
      }
    })
  </script>
</html>