Vue组件化通讯的实例代码


Posted in Javascript onJune 23, 2017

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传递过去
  }
 }

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

Javascript 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
jQuery构造函数init参数分析
May 13 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JavaScript字符串检索字符的方法
Jun 23 #Javascript
Angular2 组件通信的实例代码
Jun 23 #Javascript
js实现文字列表无缝滚动效果
Jun 23 #Javascript
jquery图片放大镜效果
Jun 23 #jQuery
Avalonjs双向数据绑定与监听的实例代码
Jun 23 #Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 #Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 #Javascript
You might like
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery鼠标停止移动事件
2013/12/21 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
原生js实现日历效果
2020/03/02 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
pandas的qcut()方法详解
2019/07/06 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python通过Pillow实现图片对比
2020/04/29 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
HTML5标签大全
2016/11/23 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
工程造价专业大专生求职信
2013/10/06 职场文书
会计自我鉴定范文
2013/10/06 职场文书
企业安全生产承诺书
2014/05/22 职场文书
长城的导游词
2015/01/30 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏