如何使用Vue实现组件化通讯

这篇文章主要介绍了如何使用Vue实现组件化通讯的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇如何使用Vue实现组件化通讯文章都会有所收获，下面我们一起来看看吧。

1. Vue的组成文件(.vue)

分为三部分，分别对应html,js,CSS

<template></template><script></script><style></style>

2. Vue的生命周期函数

1. beforeCreate() 创建数据之前

2. created() 创建数据 我们在这里的得到我们在data里面创建的数据

3. beforeMount() // Dom渲染完成前

4. mounted() //Dom渲染完成

5. beforeUpdate() // 更新视图 在beforeUpdate触发时，视图已经更新完成

6. Updated() //更新数据调用的函数、。

<div id='app'> <p>{{msg}}</p> <input type='text' v-model='msg'></div>var app = new Vue({ el: '#app', data() {  return {   msg: 1  } }, beforeCreate() {  console.log('beforeCreate', this.msg); //beforeCreate undefined  console.log('beforeCreate: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p> }, created() {  // 创建数据  console.log('created', this.msg); //beforeCreate 1   console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>  // 异步处理得到渲染的dom数据  setTimeout(() => {   this.msg = 100   console.log('nextTick', document.getElementsByTagName('p')[0])   }, 100)  // nextTick <p>100</p> }, beforeMount() {  console.log('beforeMount', this.msg) //beforeMount 1  console.log('beforeMount: ', document.getElementsByTagName('p')[0]) // beforeMount <p>{{msg}}</p> }, mounted() {  // 渲染dom  console.log('mounted', this.msg) //mounted 1  console.log('mounted: ', document.getElementsByTagName('p')[0]) //mounted <p>1</p> }, beforeUpdate() {  console.log('beforeUpdate', this.msg) //beforeUpdate 100  console.log('beforeUpdate: ', document.getElementsByTagName('p')[0]) //beforeUpdate <p>100</p> }, updated() {  console.log('updated', this.msg) // updated 1  console.log('updated: ', document.getElementsByTagName('p')[0]) // updated <p>100</p> }})

生命周期参考链接

3. export default

每一个模块都是自己的作用域，相应的属性来处理数据和函数

data(声明数据，可以是函数和属性)

类型：Object | Function

组件只接受函数

  // 对象的形式  export default{   data: {    a:1   }  }  // 函数的形式  export default{   data(){    return {     a: 1    }   }  }

methods(一些指令和其他属性的调用方法)

1. 不要用箭头函数来写里面的函数

2. this指向Vue的实例

 export default{  methods: {   plus() {    this.a++   }  } }

1、components (组件化定义)

类型： Object

自定义元素，增加代码的复用性

 // 当我们引用一个.vue文件的时候，就像使用这个文件来充当我们主体的一部分 <div>   <hello></hello>  </div> import hello from './hello.vue' export default {  components: {   hello  } }

2、computed(计算属性)

1. 计算属性的结果会被缓存，依赖的数据发生变化才会重新渲染

2. 注意计算属性和methods,watch的区别

{{this.total}} //[3,4]<button @click='add'>添加数据</button> //点击会更新this.total  export default　{ data: () => ({  a: 1,  b: [2,3] }), methods: {  add(){   this.b.push(8);  } }, computed: {  total(){   return this.b.map((item)=>{    return item+this.a   })  } }}

watch(监听对应的数据)

1. 键值对。键是我们需要监督的数据，值是相应的回调函数

2. 回调函数接受2个参数，新的值和旧的值（对于数组和对象不会出现旧值，对于简单的数据会出现旧值）

3. 监听对象的内部值变化，需要添加deep:true（数组不用）

// 点击后相应的变化data(){  return {   a: 1,   b: [2,4,6],   c:{name:'hcc',age:22}  } },methods: {  add(){   this.a++   this.b.push(8)   this.c.name = 'yx'  } },watch: {  b: function(val, oldVal){    console.log('new', val) //[2,4,6,8]    console.log('new', oldVal) //[2,4,6,8]  },  a: function(val, oldVal){   console.log(val); //2   console.log(oldVal); //1  },  c:{   handler(val){    console.log(val); //{name: 'yx',age: 22}   }   }},

props(用于接受父组件传来的数据)

1. 规定和接受父组件的数据

2. 单向数据流，子组件不能修改传递过来的数据

3. 对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

4. 可以规定接受的数据类型和默认值，如果是对象和数组，默认值导出是一个函数

// 父组件<hello :fORMParent='num'></hello> //htmlcomponents: { hello},data(){ return {  num: 3 }}//子组件//1. 数组规定接受的数据props: ['hello']//2. 验证的方式props:{ hello: Number, hello: [String, Number], hello: {  type: Object,  default(){   return {message: 'hello'}  } }}

v-on和v-emit(子组件向父元素传递数据)

vm.$emit: 子元素向父元素定义讯号和传递数据

this.$emit('规定的讯号名称', '想传递给父元素的数据')

vm.$on: 监听讯号，并触发相应的函数(函数内部不用传参)

@'规定的讯号名称'='调用自己组件的方法并可以接受传递的参数'

// 子组件data () { return {  msg: 'Welcome to Your vue.js App' }},methods: { change(){  this.$emit('sendMsg',this.msg) //把msg传递给父组件 }}// 父组件// 引入子组件，并定义componentscomponents: { hello},methods: { show(msg){   // 这里接受子组件传递的参数  console.log(msg); }}<hello @sendMsg='show'></hello> // 这里不用传递参数，不然会覆盖子元素传递的参数

ref(用来获取dom和子组件)

1. 可以用来操作dom<p ref="p">hello</p>

2. 可以用来组件中的通讯

3. 在组件中使用的this.refs是一个对象，包含了所有的绑定了的dom和子组件

// html  <h2 ref="myElement">这是一个dom元素</h2> //dom元素 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子组件 >-- 组件中this.refs => {myElement: h2, child: VueComponent}// 运用(在父元素中调用子元素的方法)// html <hello ref='child'></hello> // 子元素hello methods: {  change() {   this.$emit('getson',this.msg)   this.obj.name = 'yx'  },   drop(el) {    el.style.background = 'red';   } },// 父元素methods: { add() {  console.log(this.refs); //{child: VueComponent}  this.$refs.child.drop('这里传递父元素的dom节点') }}//如果有一个需求是，一个父元素有2个子组件，其中一个子组件的方法要调用另一个子组件的dom元素//1. 一个子组件需要向父组件发送元素this.$emit('方法名',dom)//2. 父元素接受到子组件的传递得到对应dom//3. 父元素通过this.$refs调用对应的另一个子组件的方法并传入参数// 子元素hello和world <div class="world">  <h2 ref="world">这是world的dom元素</h2>  <button @click='send'>给父元素传递dom</button> </div> methods: {  send(){   this.$emit('give',this.$refs.world); //给父元素发送dom }  <div class='hello'>  <button>改变dom</button> </div>  methods: {  changeDom(target){   console.log(target)  } } // 父元素 <world @give='父亲自己的方法'></world> <hello ref='helloChild'></hello> methods: {  // 这里接受子元素传递过来的dom元素  '父亲自己的方法'(target) {   this.refs.helloChild.changeDom(target) //调用另一个子元素的方法，并把dom传递过去  } }

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

关于“如何使用Vue实现组件化通讯”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“如何使用Vue实现组件化通讯”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。