vue学习-2-组件及组件通讯

原創 zoepriselife316 2020-07-07 06:13

组件

好处：

  1. 可复用 可以提高开发效率
  2. 方便后期的维护和修改
  3. 可以减少渲染

全局组件 && 局部组件

全局组件：
注册全局组件 ，可以用横杠也可用驼峰，如myButton / my-button，但使用时，只支持横杠

Vue.component('my-button', {
    template: '<div>{{msg}}</div>',  //template设置组件中的内容
    data() {   //组件中的data是个函数，它返回对象，与实例中的data不同，那个值是一个对象
        return {
            msg: 'aaa'
        }
    }
})

使用全局组件：

<div id="app">
    <!-- 使用全局组件 ,在DOM中只支持-的写法my-button -->
    <my-button></my-button>
</div>

局部组件：是在实例内部写的。

let vm = new Vue({
    // template: '<div>1111</div>', //Vue实例中也有template，若在实例中发现直接渲染，没有就会渲染挂载的Vue实例
    el: '#app',
    data: {},
    // 局部组件：在实例中 一般不这么写，写太多会不好维护
    components: {
        'my-button': {
            template: '<div>{{msg}}</div>', //设置组件中的内容
            data() {  //组件的data是个函数，返回一个对象
                return {
                    msg: '局部组件bbb'
                }
            }
        }
    }

})

通常这么写：

<!-- //组件的三步骤：1. 定义组件；2.注册组件；3.使用组件  -->
// 1.定义组件
let myButton = {
    template: '<div>{{msg}}</div>', //设置组件中的内容
    data() {  //组件的data是个函数，返回一个对象
        return {
            msg: '局部组件bbb'
        }
    }
}
let vm = new Vue({
    el: '#app',
    data: {},
    // 局部组件：在实例中 
    components: {
        //2.注册组件，可以简写myButton,ES6写法
        myButton: myButton 
    }

})
// dom中相应位置使用组件：
<div id="app">
    <!-- 使用全局组件 ,在dom中只支持横杠写法 my-button -->
    <!-- 3.使用组件 -->
    <my-button></my-button>
</div>

若在组件的template中，有很多div，以及有很多的层级，有点繁琐且不美观，可以使用下面这个写法：

<body>
<div id="app">
    <!-- 3.使用组件 -->
    <my-button></my-button>
</div>
<template id="button">
    <div>{{msg}}</div>
</template>
</body>

把组件中的内容，在dom中定义一个id名为button的template，然后在写组件时，这么写：

let myButton = {
    // template: '<div>{{msg}}</div>', //设置组件中的内容
    template: '#button', //设置组件中的内容,如果有很多的代码，写到这里太繁琐，可以在dom中写一个template，命名一个id，将组件中的内容都放到template中，在这使用时直接写上id
    data() {  //组件的data是个函数，返回一个对象
        return {
            msg: '局部组件bbb'
        }
    }
}

若有多个组件，也是如此写：先定义，再注册，最后使用

// 定义组件：
    let hello = {
        template: '#hello'
    }
// dom中的：
    <template id="hello">
        <div>hello</div>
    </template>

// 注册组件：
     components: {
        myButton, //2.注册组件，myButton: myButton可以简写myButton,ES6写法
        hello
    }
// 使用组件：
    <div id="app">
        <!-- 3.使用组件 -->
        <my-button></my-button>
        <hello></hello>
    </div>

此时myButton与hello是兄弟组件的关系，若想变成父子，也是可以的，注册的时候放到myButton组件components中，使用的时候也在myButton的dom中使用

// 1.定义组件
 let hello = { //在调用前要定义，因let定义的变量不会提升 
        template: '#hello'
    }
// 2.注册组件
    let myButton = {
        template: '#button',
        data() { 
            return {
                msg: '局部组件bbb'
            }
        },
        //每个组件中都有components，里面放的是它的子组件
        components: {
            hello  //使用组件的时候要放到父组件中，hello是mybutton的一个子组件
        }
    }
// 3.使用组件
// <!-- 所有的模块中元素要包裹在一个标签中div/span等，这是hello组件在myButton的template中的使用 -->
    <template id="button">
        <div>
            {{msg}}
            <hello></hello>
        </div>
    </template>

组件通讯

支持.vue后缀文件(快速原型开发)

npm install -g @vue/cli
npm install -g @vue/cli-service-global
开发环境：vue serve App.vue
生产环境：vue build App.vue

  1. 父组件传递参数给子组件，使用属性的方式:m=“money”，而子组件使用props:[‘m’]来获取。
    子组件使用观察者模式，使用$emit将值传给父组件
    父组件：
<template>
  <div>
    Parent
    <!-- m="500"是静态的字符串，若是要传动态的使用:m -->
    <!-- 父组件监听子组件的事件，并给事件绑定函数 -->
    <!-- <Son :m="money" @change="fn"></Son> -->
    <!-- 父子传递数据，语法糖的写法 -->
    <!-- <Son :m.sync="money"></Son>-->
    <!-- v-model的原理是把money绑定在属性value中 绑定的事件名@input -->
    <!-- <Son :value="money" @input="(data)=>money=data"></Son> -->
    <Son v-model="money"></Son>
  </div>
</template>
<script>
import Son from "./Son";
export default {
  data() {
    return {
    //   money: 'ABC',
      money: 500,
    };
  },
  components: {
    Son
  },
//    父组件中的绑定事件执行 
  methods: {
    fn(data) {
      // 当父组件监听到子组件的点击事件执行了，绑定方法就执行，并且会拿到子组件对应传过来的值
      this.money = data;
    }
  }
};
</script>

子组件：

<template>
  <div>
    Son
    <!-- 获取传过来的值用这个 -->
    <!-- {{m}}   -->
    <!-- 这是改变后的值 -->
    {{changeM}} 
    <button @click="giveData">给父组件数据</button>
     <!--这是v-model对应的值value  -->
    {{value}}
  </div>
</template>
<script>
export default {
// props: ["m"], //获取从父组件拿到的值使用，props
  // computed: {
  //   //若想对传过来的值修改，例如变成小写的，推荐使用计算属性
  //   changeM() {
  //     return this.m.trim().toLowerCase();
  //   }
  // },
  
  // 验证传过来的值，下面会详解
  props: {
    m: {
      type: [String, Number] //值的类型
      // default: 100 //默认值 , 它与required不能同时使用，用一个就可以
      // required: true //必传
      // validator: value => {
      //   //自定义验证规则
      //   return value > 400 && value < 1000;
      // }
    },
    arr: {
      type: Array, //若是数组或对象，默认值是函数
      default: () => [1]
    },
    obj: {
      type: Object,
      default: () => ({}) //ES6中，函数中的直接写{}是作用域，所以需要加()
    },
    value: {
      //这是v-model对应的value
      type: Number
    }
  },
  computed: {   //若想对传过来的值修改，推荐使用计算属性
    changeM() {
      return this.m.trim().toLowerCase();
    }
  },
//   <!-- 子组件中的方法，给父组件发数据 -->
  methods: {
    giveData() {
      // 子组件执行父组件监听的事件，子组件使用$emit将数据发送给父组件
    //   this.$emit("change", 999); //change是监听的事件，999是参数
    // this.$emit("update:m", 999);  //若在父组件使用:m.sync='money',在这要使用update带属性名表示事件
    this.$emit("input", 999); //使用v=model传的值，事件是input事件
    }
  }
};
</script>

props验证

父组件传的值为：

data() {
    return {
      money: 400,
    };
  },//控制台会报错，自定义验证规则失败，因不满足条件

子组件：

<template>
  <div>
    Son
    <!-- 获取传过来的值用这个 -->
    {{m}}  
  </div>
</template>
<script>
export default {
// 验证传过来的值
props:{
    m:{
        type:[String,Number], //值的类型
        // default:100, //默认值 , 它与required不能同时使用，用一个就可以   
        required:true, //必传
        validator:(value)=>{ //自定义验证规则
            return value>400 &&  value<1000
        }
    }
},
};
</script>

若传的值是一个对象或数组（空数组，或空对象），可以设置默认值，需要注意：
数组的话，默认值是一个函数。

props:{
    arr: {
      type: Array, //若是数组或对象，默认值是函数
      default: () => [1]
    },
    obj: {
      type: Object,
      default: () => ({}) //ES6中，函数中的直接写{}是作用域，所以需要加()
    }
}
  1. $attrs $listeners:批量把属性和方法往下传
    attrs(通过v−bind="attrs(通过 v-bind="attrs" 再往下一层传递，批量把属性往下传)；
    listeners(使用v−on向下传递v−on="listeners(使用v-on向下传递 v-on="listeners.click()"可以在GrandSon组件中执行Parent父组件的事件，批量把方法往下传)。
    父组件：
    <template>
  <div>
    Parent
    <!-- m="500"是静态的字符串，若是要传动态的使用:m -->
    <!-- 父组件监听子组件的事件，并给事件绑定函数 -->
    <!-- <Son :m="money" @change="fn"></Son> -->
    <!-- 父子传递数据，语法糖的写法 -->
    <!-- <Son :m.sync="money"></Son> -->
    <!-- v-model的原理是把money绑定在属性value中 绑定的事件名@input -->
    <!-- <Son :value="money" @input="(data)=>money=data"></Son> -->
    <!-- <Son v-model="money"></Son> -->
    <Son :name="{a:1}" :age="2" @click="fn1"></Son>
  </div>
</template>
<script>
import Son from "./Son";
export default {
  data() {
    return {
      // money: "ABC" //传递的数据是大写
      money: 400 //传递的数据是大写
    };
  },
  components: {
    Son
  },
  methods: {
    fn1() {
      alert(1);
    },
    fn(data) {
      // 当父组件监听到子组件的点击事件执行了，绑定方法就执行，并且会拿到子组件对应传过来的值
      this.money = data;
    }
  }
};
</script>

子组件：

<template>
  <div>
    Son
    <!--
    获取传过来的值用这个   
    -->
    <!-- {{m}} -->
    {{arr}}
    {{obj}}
    <!--这是v-model对应的值value  -->
    {{value}}
    <!-- 这是修改过的值 -->
    <!-- {{changeM}} -->

    <!-- 直接使用这个$attrs可以获取父组件传过来的属性{ "name": {"a":1}, "age": 2 } -->
    {{$attrs}}
    {{$attrs.name}}
    <!-- { "a": 1 }-->
    <!-- 执行父组件的事件使用$listeners,里面的事件click() -->
    <!-- {{$listeners.click()}} -->

    <button @click="giveData">给父组件数据</button>
    <!-- 把从父组件拿到的属性$attrs.name传给GrandSon组件 -->
    <GrandSon v-bind="$attrs" :name1="$attrs.name" v-on="$listeners"></GrandSon>
  </div>
</template>
<script>
import GrandSon from "./GrandSon";
export default {
  // props: ["m"], //获取从父组件拿到的值使用，props
  // computed: {
  //   //若想对传过来的值修改，例如变成小写的，推荐使用计算属性
  //   changeM() {
  //     return this.m.trim().toLowerCase();
  //   }
  // },
  props: {
    // 验证传过来的值
    m: {
      type: [String, Number] //值的类型
      // default: 100 //默认值 , 它与required不能同时使用，用一个就可以
      // required: true //必传
      // validator: value => {
      //   //自定义验证规则
      //   return value > 400 && value < 1000;
      // }
    },
    arr: {
      type: Array, //若是数组或对象，默认值是函数
      default: () => [1]
    },
    obj: {
      type: Object,
      default: () => ({}) //ES6中，函数中的直接写{}是作用域，所以需要加()
    },
    value: {
      //这是v-model对应的value
      type: Number
    }
  },
  methods: {
    giveData() {
      // 子组件执行父组件监听的事件，子组件使用$emit将数据发送给父组件
      // this.$emit("change", 999); //change是监听的事件，999是参数
      // this.$emit("update:m", 999); //若在父组件使用:m.sync='money',在这要使用update带属性名表示事件
      this.$emit("input", 999); //使用v=model传的值，事件时input
    }
  },
  components: {
    GrandSon
  }
};
</script>

GrandSon组件：

<template>
  <div>
    GrandSon
    <!-- 这是从Son传来的来自Parent的数据,还有Parent的click事件，可以直接调用Parent组件中的事件 -->
    {{$attrs}}{{name1}}
    {{$listeners.click()}}
  </div>
</template>
<script>
export default {
  props: ["name1"]
};
</script>
  1. provide inject 因为是全局的，只要定义，在任意地方都可以使用，但没法找到是在哪里定义的变量
    使用provide定义全局变量，想在哪里使用就使用inject注入即可
    Parent组件：
<template>
  <div>
    Parent
    <Son :name="{a:1}" :age="2" @click="fn1"></Son>
  </div>
</template>
<script>
import Son from "./Son";
export default {
  provide() {
    return {
      parentMsg: "Parent中使用provide定义的全局数据"
    };
  },
  data() {
    return {
      money: 400 //传递的数据是大写
    };
  },
  components: {
    Son
  },
  methods: {
    fn1() {
      alert(1);
    },
    fn(data) {
      // 当父组件监听到子组件的点击事件执行了，绑定方法就执行，并且会拿到子组件对应传过来的值
      this.money = data;
    }
  }
};
</script>

GrandSon组件，使用inject注入Parent中定义的全局属性parentMsg:

<template>
  <div>
    GrandSon
    <!-- 这是调用从全局注入的parentMsg -->
    {{parentMsg}}
  </div>
</template>
<script>
export default {
  // 注入全局定义的parentMsg属性（定义的位置在Parent组件）
  inject: ["parentMsg"],
  props: ["name1"]
};
</script>
  1. $parent $children ref
    $parent 获取父组件 $children 获取子组件 ref 实例如下：
    父组件：
<template>
  <div>
    Parent
    <Son :name="{a:1}" :age="2" @click="fn1"></Son>
  </div>
</template>
<script>
import Son from "./Son";
export default {
  data() {
    return {
      money: 400 //传递的数据是大写
    };
  },
  components: {
    Son
  },
  methods: {
    fn1() {
      alert("Parent组件中的方法111");
    }
  }
};
</script>

Son子组件：

<template>
  <div>
    Son
    <GrandSon ref="grandSon"></GrandSon>
  </div>
</template>
<script>
import GrandSon from "./GrandSon";
export default {
  props: {
    //这是v-model对应的value
    value: {
      type: Number
    },
    // 验证传过来的值
    m: {
      type: [String, Number] //值的类型
      // default: 100 //默认值 , 它与required不能同时使用，用一个就可以
      // required: true //必传
      // validator: value => {
      //   //自定义验证规则
      //   return value > 400 && value < 1000;
      // }
    }
  }
  components: {
    GrandSon
  },
  //DOM加载完成
  mounted() {
    // 调用父组件的方法：获取父组件,调用fn1的方法
    // this.$parent.fn1();
    // 调用子组件的方法：子组件是个数组，取第一个子组件的fn2方法
    // this.$children[0].fn2();
    // 调用子组件的方法：通过$refs.grandSon可以拿到GrandSon组件，同样可以调用fn2方法
    this.$refs.grandSon.fn2();
  }
};
</script>

GrandSon组件：

<template>
  <div>
    GrandSon
  </div>
</template>
<script>
export default {
  methods: {
    fn2() {
      alert("GrandSon222中的方法");
    }
  }
};
</script>
  1. eventBus 兄弟之间传递数据 $on emitVue.prototype.emit Vue.prototype.bus = new Vue; //bus是公共的。this.bus是公共的。 this.bus.on(′test′,function(data)console.log(data));//一个兄弟组件写这个，监听事件，改变值。this.on('test',function(data){console.log(data)}); //一个兄弟组件写这个，监听事件，改变值。 this.bus,emit(′test′,1000);//另一个兄弟组件发送数据。示例如下：App.vue入口文件中定义emit('test',1000); //另一个兄弟组件发送数据。 示例如下： App.vue入口文件中定义bus:
<template>
  <div>
    <!--3.使用组件  -->
    <Parent></Parent>
  </div>
</template>
<style scoped>
</style>
<script>
// 1.引入组件
import Parent from "./components/Parent";
import Vue from "vue";
export default {
  data() {
    return {};
  },
  components: {
    Parent //2.注册组件
  }
};
Vue.prototype.$bus = new Vue(); //$bus是公共的
</script>

父组件：

<template>
  <div>
    Parent
    <Son :name="{a:1}" :age="2" @click="fn1"></Son>
    <Brother></Brother>
  </div>
</template>
<script>
import Son from "./Son";
import Brother from "./brother";
export default {
  data() {
    return {
      // money: "ABC" //传递的数据是大写
      money: 400 //传递的数据是大写
    };
  },
  components: {
    Son,
    Brother
  }
};
</script>

Son组件：

<template>
  <div>
    Son
    <button @click="change">改变兄弟</button>
  </div>
</template>
<script>
import GrandSon from "./GrandSon";
export default {
  methods: {
    change() {
      this.$bus.$emit("test", 1000);
      console.log(this.$bus);
    }
  }
};
</script>

Brother兄弟组件：

<template>
  <div>我是Son组件的兄弟组件{{m}}</div>
</template>
<script>
export default {
  mounted() {
    this.$bus.$on("test", data => { //使用箭头函数，this指向现在的Vue示例，因要改当前Brother组件的m的值。若不用箭头函数，this指向App.vue中定义的存储值的vue实例
    //   console.log(data, this);
      this.m = data;
    });
  },
  data() {
    return {
      m: 222
    };
  }
};
</script>

执行：
vue serve App.vue
点击修改兄弟按钮，就可以看到运行结果了。

这里没有package.json文件，因是用的快速原型开发，下载完后（全局安装）就可以通过vue serve App.vue（入口文件名）使用。

学习代码已上传git

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Uniapp中父组件向子组件传递prop，新的prop会带有旧的prop属性

簡潔 最近使用uniapp開發微信小程序，某一個頁面需要做成可配置化，因此會出現直接在父組件修改傳遞到子組件的prop，但是會出現這種情況，假設新傳遞的prop對象爲newObj，舊傳遞的prop對象爲oldObj，如果Objec

py_boy 2020-07-08 12:07:32

Vue加载OpenLayer入门教程（超简单）

Vue加載OpenLayer很簡單，很簡單，很簡單第一步：創建vue項目第二步 加載openlayer 很簡單，很簡單，很簡單 學會了vue，開始測試mapbox的搭配，學會了mapbox，有整了一下openlayer的導入，剛開

来日可期啊 2020-07-08 12:37:34

element-ui中的el-table-column加v-if不生效，表头错乱

 項目中需要按照不同的媒體類型，展示不同的表頭且數據字段也不同。可以增加不同key值解決v-if不生效問題。 <el-table-column prop="author" align="center"

杨哥杨哥万万岁 2020-07-08 12:30:46

vue中index.html文件为什么可以使用模板语法

今天無意間看到在項目的index.html文件中，使用了ejs的語法（後來知道是lodash），就非常費解，之前在node項目中，需要指定使用ejs模板引擎，在中間件中rander到前臺頁面。我理解的大概就是這個原理 查看了官方的解釋

杨哥杨哥万万岁 2020-07-08 12:30:46

富文本编辑器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor yarn add vue-quill-editor 或者 npm install vue-quill-editor --save 2. 在main.js中引入： import Vue

ddx2019 2020-07-08 11:55:42

Html Webpack Plugin: ReferenceError: process is not defined

修改ejs文件 將<% if (!process.browser) {%> 改成： <% if (!require(‘process’).browser) { %>

真·skysys 2020-07-08 11:54:32

electron-vue项目引入element-ui

參考： https://www.jianshu.com/p/1defe83929f3 npm install element-ui main.js import ElementUI from 'element-ui' impor

真·skysys 2020-07-08 11:54:31

后端 Java 程序员眼中的 Vue——（一）创建及运行

現在 Vue 用的越來越多，工作上有時前後端都要搞，作爲後端程序員接手 Vue 該如何做呢，下面來記錄一下基礎的東西，並創建一個 Vue 項目 談 Vue 不能避開的 3 個東西 Node.js npm vue-cli No

厕所博士 2020-07-08 11:50:38

Axios--基础知识

下載使用方式： npm: $ npm install axios cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 案例（GET以及POST請求

GQ_cyan 2020-07-08 11:50:38

Element-ui

Element-ui一、什麼是Element-ui 一、什麼是Element-ui element 是基於 vue 實現的一套不依賴業務的 UI 組件庫，提供了豐富的PC端組件，減少用戶對常用組件的封裝，降低了開發的難易程度

狂风 2020-07-08 11:49:25

vue.js 里面，什么是虚拟DOM?

Vuejs 將DOM 抽象成一個以JavaScript 對象爲節點的虛擬DOM樹,以VNode節點模擬真實的DOM，可以對這顆抽象樹進行創建節點,刪除節點以及修改節點的操作, 經過diff算法得出一些需要修改的最小單位,再更新視圖,大大提

阿冰介 2020-07-08 11:48:15

vue 是怎么实现数据响应的

簡述：Vuejs 的響應式依賴於Object.defineProprtry,通過監聽對象屬性 的setter/getter 的變化,通過getter 進行依賴收集,而setter相當於觀察者,數據產生變化的時候通知「訂閱者」更新視圖

阿冰介 2020-07-08 11:48:15

基于activiti5.22、SpringBoot2开发的流程解决方案，源码分享

AgileBPM 敏捷工作流開發平臺 業務對象: 由實體（表）組成，支持任意數據結構（關聯關係），可以跨庫來組織業務對象（支持分佈式事務）。而且難以置信的支持N層。 業務表單: 表單完美的支撐了業務對象的展示，並支持豐富的前端組件和字段級

一直孤独的程序猿 2020-07-08 11:39:18

开发这样一个复杂的表单你需要用多久

> 表單在中後臺開發的時，是最多也是最另人頭疼的，多級聯動，繁雜的驗證，動態解析等可算是苦不堪言。所以出現了無數的表單解決方案，像Uform, formily, NoForm等等一大堆用來解決中後臺開發表單，可想而知，解決複雜的表單開發是

迷路的蝙蝠 2020-07-08 11:35:02

vue的slot（slot具名插槽。slot非具名插槽，slot的作用域，）

vue的slot 1、什麼是slot slot是插槽，插即是可以插入，槽就是坑，即是可以再代碼中插入 如果子組件模板中不包含插口，那麼父組件的內容將會被丟棄。當子組件模板中有一個麼有屬性的插槽時，父組件傳入的整個內容片段，將插入到

ljljlj1993 2020-07-08 11:14:40