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> //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);
 }
}

<hello @sendMsg='show'></hello> // 这里不用传递参数,不然会覆盖子元素传递的参数

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

  1. 可以用来操作dom<p ref="p">hello</p>
  2. 可以用来组件中的通讯
  3. 在组件中使用的this.refs是一个对象,包含了所有的绑定了的dom和子组件
// html
 <h1 ref="myElement">这是一个dom元素</h1> //dom元素
 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子组件
 >-- 组件中this.refs => {myElement: h1, 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">
  <h1 ref="world">这是world的dom元素</h1>
  <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传递过去
  }
 }

​以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js 父子组件通讯开发实例

    vue.js,是一个构建数据驱动的 web 界面的库.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.(这是官方的一个解释!) 小编没使用过angularjs,也没使用过react.js,不能详细的说明三者的区别,想了解的话,在官方有一个分析,请点这里查看 小编从业前端开发也有了一年多的时间,刚开始的时候,前端开发展现的技术太多,小编有心无力,兼顾不过来,经过了解之后,还是选择了学原生js基础兼并jquery的学习上路.小编使用vue.js,也是因为业务的需求

  • Vue组件化通讯的实例代码

    1. Vue的组成文件(.vue) 分为三部分,分别对应html,js,css <template></template> <script></script> <style></style> 2. Vue的生命周期函数 beforeCreate() 创建数据之前 created() 创建数据 我们在这里的得到我们在data里面创建的数据 beforeMount() // Dom渲染完成前 mounted() //Dom渲染完成 bef

  • vue+swiper实现组件化开发的实例代码

    swiper的组件 <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in swiper"><img :src="item.room_src" alt="">&l

  • Vue组件化开发思考

    一般说到组件,我首先想到的是弹窗,其他就大脑空白了. 因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件- 然而我才发现这个想法是有问题的. 我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了... 缘起于最近的一个表单开发,页面上有2个是联动菜单的选项. 首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈- (废话,同一个项目 当然要保持ui风格的相同啊!) 不过差别在于 我这个是 一个1级 一个2级, 地址那个是4级的. 然后我就想着把那个地址的组件引进来

  • vue.js 父向子组件传参的实例代码

    1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY = 'todos-vue.js' export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }

  • vue router 组件的高级应用实例代码

    1 动态设置页面标题 页面标题是由 <title></title> 来控制的,因为 SPA 只有一个 HTML,所以当切换到不同的页面时,标题是不会发生变化的.必须通过 JavaScript 来修改 <title></title> 中的内容: window.document.title ='xxx' 有一种思路是在每个页面的 *.vue 的 mounted 钩子函数中,通过 JavaScript 来修改 <title></title>

  • Vue中的组件及路由使用实例代码详解

    1.组件是什么 组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.通常一个应用会以一棵嵌套的组件树的形式来组织: 1.1组件的声明及使用 全局组件 <body> <div id="app"> <!-- 用全局组件的名称作为HTML的标签 --> <myzujian></myzujian> </div> </body> <script>

  • vue中子组件向父组件传递数据的实例代码(实现加减功能)

    这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父组件的值是减一变成 0 具体代码我直接贴出来,刚出炉的代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

  • Vue.js子组件向父组件通信的方法实例代码详解

    一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文

  • 基于Vue组件化的日期联动选择器功能的实现代码

    我们的社区前端工程用的是element组件库,后台管理系统用的是iview,组件库都很棒,但是日期.时间选择器没有那种" 年份 - 月份 -天数 " 联动选择的组件.虽然两个组件库给出的相关组件也很棒,但是有时候确实不是太好用,不太明白为什么很多组件库都抛弃了日期联动选择.因此考虑自己动手做一个. 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象,如:Sun Sep 02 2018 00:00:00 GMT+08

  • vue使用transition组件动画效果的实例代码

    transition文档地址 定义一个背景弹出层实现淡入淡出效果 <template> <div> <button @click="show = !show"> Toggle </button> <transition name="fadeBg"> <div class="bg" v-if="show">hello</div> </tra

随机推荐