189 8069 5689

Vue中如何实现组件化通讯

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

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的柳州网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

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

分为三部分,分别对应html,js,css





2. Vue的生命周期函数

  1. beforeCreate() 创建数据之前

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

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

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

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

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



 

{{msg}}

 
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 

{{msg}}

 },  created() {   // 创建数据   console.log('created', this.msg); //beforeCreate 1    console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate 

{{msg}}

  // 异步处理得到渲染的dom数据   setTimeout(() => {    this.msg = 100    console.log('nextTick', document.getElementsByTagName('p')[0])    }, 100)   // nextTick 

100

 },  beforeMount() {   console.log('beforeMount', this.msg) //beforeMount 1   console.log('beforeMount: ', document.getElementsByTagName('p')[0]) // beforeMount 

{{msg}}

 },  mounted() {   // 渲染dom   console.log('mounted', this.msg) //mounted 1   console.log('mounted: ', document.getElementsByTagName('p')[0]) //mounted 

1

 },  beforeUpdate() {   console.log('beforeUpdate', this.msg) //beforeUpdate 100   console.log('beforeUpdate: ', document.getElementsByTagName('p')[0]) //beforeUpdate 

100

 },  updated() {   console.log('updated', this.msg) // updated 1   console.log('updated: ', document.getElementsByTagName('p')[0]) // updated 

100

 } })

生命周期参考链接

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文件的时候,就像使用这个文件来充当我们主体的一部分
 
      
 import hello from './hello.vue'  export default {   components: {    hello   }  }

2、computed(计算属性)

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

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

{{this.total}} //[3,4]
添加数据 //点击会更新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. 可以规定接受的数据类型和默认值,如果是对象和数组,默认值导出是一个函数

// 父组件

 //html
components: {
 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传递给父组件
 }
}

// 父组件
// 引入子组件,并定义components
components: {
 hello
},
methods: {
 show(msg){   // 这里接受子组件传递的参数
  console.log(msg);
 }
}

 // 这里不用传递参数,不然会覆盖子元素传递的参数

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

  1. 可以用来操作dom

    hello

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

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

// html 
 这是一个dom元素 //dom元素
  // 子组件
 >-- 组件中this.refs => {myElement: h2, child: VueComponent}

// 运用(在父元素中调用子元素的方法)
// html 
 
// 子元素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
 
  这是world的dom元素
  给父元素传递dom
 
 methods: {   send(){    this.$emit('give',this.$refs.world); //给父元素发送dom  }        
   methods: {   changeDom(target){    console.log(target)   }  }  // 父元素      methods: {   // 这里接受子元素传递过来的dom元素   '父亲自己的方法'(target) {    this.refs.helloChild.changeDom(target) //调用另一个子元素的方法,并把dom传递过去   }  }

关于“Vue中如何实现组件化通讯”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中如何实现组件化通讯”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。


当前标题:Vue中如何实现组件化通讯
网页路径:http://jkwzsj.com/article/pshjjs.html