vue学习之路（组件）

什么是组件

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用

组件与组件树

  1.     <!-- 挂载点：是隐式声明根组件 -->
  2.     <div id="root">
  3.       <child-component></child-component>
  4.       <child-component></child-component>
  5.       <child-component></child-component>
  6.     </div>
  7.     <script>
  8.       // 组件：从形式上看就是一个自定义html标签
  9.       // 组件是可复用的vue实例,构造函数Vue的子类
  10.       // 1. 创建
  11.       // const childComponent = Vue.extend({
  12.       //   template: "<h2>hello world</h2>",
  13.       // });
  15.       // 2. 注册
  16.       // 使用Vue.component()静态方法注册的是 全局组件
  17.       //   Vue.component(组件名,对象字面量表示的组件配置项)
  18.       //   组件名：自定义的html标签
  19.       // Vue.component("child-component", childComponent);
  20.       Vue.component("child-component", {
  21.         template: "<h2>hello world</h2>",
  22.       });
  24.       // 3. 挂载
  25.       // 将标签添加到页面渲染
  28.       const vm = new Vue({
  29.         el: document.querySelector("#root"),
  30.       });
  31.     </script>

全局组件

全局组件：全局可见，声明在Vue实例外部

  1.     <div id="root">
  2.       <button-inc></button-inc>
  3.     </div>
  4.     <hr />
  5.     <div id="app">
  6.       <button-inc></button-inc>
  7.     </div>
  8.     <script>
  9.       // 全局组件：全局可见，声明在Vue实例外部
  10.       Vue.component("button-inc", {
  11.         // 组件中的模板代码：允许存在数据占位符的html字符串
  12.         // 模板内容必须写到一对父元素标签中
  13.         template: `
  14.         <div>
  15.           <button @click="count++">点赞：+{{count}}</button>
  16.         </div>
  17.         `,
  18.         data() {
  19.           return {
  20.             count: 0,
  21.           };
  22.         },
  23.       });
  25.       const vm = new Vue({
  26.         el: document.querySelector("#root"),
  27.       });
  28.       const vm1 = new Vue({
  29.         el: document.querySelector("#app"),
  30.       });
  32.       // 全局组件可以在多个Vue实例共享，通常一个项目只有一个vue实例，全局组件尽可能不用，使用局部组件。
  34.     </script>

还可以将组件中的 template 提出去到html中。

  1.     <div id="root">
  2.       <button-inc></button-inc>
  3.     </div>
  4.     <hr />
  5.     <div id="app">
  6.       <button-inc></button-inc>
  7.     </div>
  8.     <!-- 模板开始 -->
  9.     <template id="inc">
  10.       <div>
  11.         <button @click="count++">点赞：+{{count}}</button>
  12.       </div>
  13.     </template>
  14.     <!-- 模板结束 -->
  15.     <script>
  16.       Vue.component("button-inc", {
  17.         template: "#inc",
  18.         // 组件中必须使用函数data()来声明组件变量
  19.         data() {
  20.           return {
  21.             count: 0,
  22.           };
  23.         },
  24.       });
  26.       const vm = new Vue({
  27.         el: document.querySelector("#root"),
  28.       });
  29.       const vm1 = new Vue({
  30.         el: document.querySelector("#app"),
  31.       });
  33.       // 全局组件可以在多个Vue实例共享，通常一个项目只有一个vue实例，全局组件尽可能不用，使用局部组件。
  35.     </script>

局部组件

局部组件是属于vue实例

  1.     <div id="root">
  2.       <my-child></my-child>
  3.     </div>
  5.     <template id="hello">
  6.       <p>hello {{userName}}</p>
  7.     </template>
  8.     <script>
  9.       const vm = new Vue({
  10.         el: document.querySelector("#root"),
  11.         // 局部组件是属于vue实例
  12.         components: {
  13.           "my-child": {
  14.             template: "#hello",
  15.             data() {
  16.               return {
  17.                 userName: "TJ",
  18.               };
  19.             },
  20.           },
  21.         },
  22.       });
  23.     </script>

另一种简写方案

  1.     <div id="root">
  2.       <hello></hello>
  3.     </div>
  5.     <script>
  6.       const hello={
  7.         template: `<p>hello {{userName}}</p>`,
  8.         data() {
  9.             return {
  10.               userName: "TJ",
  11.             },
  12.         }
  13.       };
  14.       const vm = new Vue({
  15.         el: document.querySelector("#root"),
  16.         // 局部组件是属于vue实例
  17.         components: {hello},
  18.         },
  19.       });
  20.     </script>

组件之间的传参：父组件向子组件传参

父组件是通过自定义属性的方式将参数传到子组件中的

  1.     <div id="app">
  2.       <!-- 父组件是通过自定义属性的方式将参数传到子组件中的 -->
  3.       <btn-inc :username="username" :count="count"></btn-inc>
  4.     </div>
  5.     <script>
  6.       const vm = new Vue({
  7.         el: document.querySelector("#app"),
  8.         data() {
  9.           return {
  10.             username: "TJ",
  11.             count: 0,
  12.           };
  13.         },
  14.         //局部组件
  15.         components: {
  16.           btnInc: {
  17.             props: ["username","count"],
  18.             // 报错原因，组件之间的数据传递是单向的，不允许在子组件中更新父组件的数据。
  19.             template: `
  20.             <div>
  21.                 <button @click="inc(1)">点赞：+{{num}}</button>
  22.                 <span>{{username}}</span>
  23.             </div>
  24.             `,
  25.             data(){
  26.                 return {
  27.                     num:this.count,
  28.                 }
  29.             },
  30.             methods:{
  31.                 inc(n) {
  32.                     this.num += n;
  33.                 }
  34.             }
  35.           },
  36.         },
  37.       });
  38.     </script>

组件之间的传参：子组件向父组件传参

  1.    <div id="app">
  2.       <!-- 子组件中的更新父组件数据是通过自定义同名事件完成的-->
  3.       <btn-inc
  4.         :username="username"
  5.         :count="count"
  6.         @click-count="handle"
  7.       ></btn-inc>
  8.     </div>
  9.     <script>
  10.       const vm = new Vue({
  11.         // 子组件向父组件传参是通过声明同名事件来实现
  12.         el: document.querySelector("#app"),
  13.         data() {
  14.           return {
  15.             username: "TJ",
  16.             count: 0,
  17.           };
  18.         },
  19.         //局部组件
  20.         components: {
  21.           btnInc: {
  22.             props: ["username", "count"],
  23.             // 报错原因，组件之间的数据传递是单向的，不允许在子组件中更新父组件的数据。
  24.             //   $emit(父组件中要使用的方法名称，子组件要传给父组件的值)
  25.             template: `
  26.               <div>
  27.                   <button @click="$emit('click-count',10)">点赞：+{{count}}</button>
  28.                   <span>{{username}}</span>
  29.               </div>           
  30.               `,
  31.             methods: {
  32.               inc(n) {
  33.                 this.num += n;
  34.               },
  35.             },
  36.           },
  37.         },
  38.         // 父组件更新数据的方法
  39.         methods: {
  40.           handle(value) {
  41.             this.count += value;
  42.             this.username = "T.,j";
  43.             console.log(vm.count);
  44.           },
  45.         },
  46.       });
  47.     //   总结：
  48.     //   1. 父组件 向 子组件 传参： 自定义属性
  49.     //   2. 子组件 向 父组件 传参： 自定义方法
  50.     </script>

组件之间的双向传参

  1.     <div id="demo">
  2.       <input type="text" :value="value" @input="value = $event.target.value" />
  3.       <p>{{value}}</p>
  4.     </div>
  6.     <script>
  7.       new Vue({
  8.         el: "#demo",
  9.         data() {
  10.           return {
  11.             value: 123,
  12.           };
  13.         },
  14.       });
  15.     </script>
  17.     <hr />
  19.     <div id="app">
  20.       <p>父组件 单价：{{price}} 元</p>
  21.       <p>
  22.         <span>子组件</span
  23.         ><my-input :my-price="price" @input-text="handle"></my-input>元
  24.       </p>
  25.     </div>
  26.     <script>
  27.       const vm = new Vue({
  28.         // 子组件向父组件传参是通过声明同名事件来实现
  29.         el: document.querySelector("#app"),
  30.         data() {
  31.           return {
  32.             price: 4588,
  33.           };
  34.         },
  35.         //局部组件
  36.         components: {
  37.           myInput: {
  38.             props: ["my-price"],
  39.             template: `
  40.             <input type="text" :value="myPrice" @input="$emit('input-text',$event.target.value)" />
  41.             `,
  42.           },
  43.         },
  44.         methods: {
  45.           handle(value) {
  46.             this.price = value;
  47.           },
  48.         },
  49.       });
  50.     </script>

另一种简化方案:将$emit()提出去，写到methods里

  1.     <div id="app">
  2.       <p>父组件 单价：{{price}} 元</p>
  3.       <p>
  4.         <span>子组件</span
  5.         ><my-input :my-price="price" @input-text="handle"></my-input>元
  6.       </p>
  7.     </div>
  8.     <script>
  9.       const vm = new Vue({
  10.         // 子组件向父组件传参是通过声明同名事件来实现
  11.         el: document.querySelector("#app"),
  12.         data() {
  13.           return {
  14.             price: 4588,
  15.           };
  16.         },
  17.         //局部组件
  18.         components: {
  19.           myInput: {
  20.             props: ["my-price"],
  21.             template: `
  22.             <input type="text" :value="myPrice" @input="foo" />
  23.             `,
  24.             methods:{
  25.               foo(ev){
  26.                 this.$emit('input-text',ev.target.value)
  27.               }
  28.             }
  29.           },
  30.         },
  31.         methods: {
  32.           handle(value) {
  33.             this.price = value;
  34.           },
  35.         },
  36.       });
  37.     </script>

插槽：组件内容分发

  1.     <div id="app">
  2.       <my-comp>world</my-comp>
  3.     </div>
  4.     <script>
  5.       new Vue({
  6.         el: "#app",
  7.         components: {
  8.           myComp: {
  9.             template: `
  10.             <div>
  11.                 <h2>Hello <slot>user</slot></h2>
  12.             </div>
  13.             `,
  14.           },
  15.         },
  16.       });
  17.     </script>

注意:
难点是子组件向父组件传参通过同名事件完成 $emit(同名事件名,参数)，如果把此处提出写到methods中要使用this.$emit(),因为是要指定是子组件
在手册中提到在组件中使用v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。

  1. <input v-model="searchText">

等价于：

  1. <input
  2.   v-bind:value="searchText"
  3.   v-on:input="searchText = $event.target.value"
  4. >

当用在组件上时，v-model 则会这样：

  1. <custom-input
  2.   v-bind:value="searchText"
  3.   v-on:input="searchText = $event"
  4. ></custom-input>

为了让它正常工作，这个组件内的 <input> 必须：

将其 value attribute 绑定到一个名叫 value 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

写成代码之后是这样的：

  1. Vue.component('custom-input', {
  2.   props: ['value'],
  3.   template: `
  4.     <input
  5.       v-bind:value="value"
  6.       v-on:input="$emit('input', $event.target.value)"
  7.     >
  8.   `
  9. })

现在 v-model 就应该可以在这个组件上完美地工作起来了：

  1. <custom-input v-model="searchText"></custom-input>

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>组件使用v-model</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9.   </head>
  10.   <body>
  11.     <div id="app">
  12.       <p>父组件：{{searchText}}</p>
  13.       <custom-input v-model="searchText"></custom-input>
  14.     </div>
  15.     <script>
  16.       new Vue({
  17.         el: "#app",
  18.         data() {
  19.           return {
  20.             searchText: "test",
  21.           };
  22.         },
  23.         components: {
  24.           "custom-input": {
  25.             props: ["value"],
  26.             template: `
  27.               <input
  28.                 v-bind:value="value"
  29.                 v-on:input="$emit('input', $event.target.value)"
  30.               >
  31.             `,
  32.           },
  33.         },
  34.       });
  35.     </script>
  36.   </body>
  37. </html>

感觉组件使用v-model不是很灵活的样子

更多相关文章

  1. PHP基础: 类(class)的声明,实例化,静态成员和类的扩展﹑trait的功
  2. Fuchsia OS ——未来的Google操作系统?
  3. 2021-2-16：请问你知道分布式设计模式中的Quorum思想么？
  4. Docker快速搭建Clickhouse集群(3分片3副本)
  5. 挑战Redis单实例内存最大极限，“遭遇”NUMA陷阱！
  6. 第2章 0126-细说变量与常量，课程笔记、心得（数据类型的转换与检测
  7. 组件基础与组件之间的通信
  8. 0128- 实例演示函数作用域与闭包,回调的使用场景与参数调用
  9. 实例演示抽象类和接口的区别

随机推荐

  1. android屏幕监视工具 android screen mon
  2. Android(安卓)TextView长按复制文本
  3. Android SDK版本和ADT版本
  4. Android中定义样式(1)
  5. Android的MediaPlayer架构介绍
  6. android 入门之二【android 体系架构】
  7. 【Android 开发】：通知之Notifications To
  8. handler机制
  9. android界面设计之shape的使用
  10. 在 Android 上使用 XML