Vue2 （1）组件化

来源：互联网发布：数控车床自动编程软件编辑：程序博客网时间：2024/05/22 13:24

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>

阅读全文

1 0