微信小程序来了_Vue组件化通讯的实例代码

Vue组件化通讯的实例代码       这篇文章主要介绍了Vue组件化通讯的实例代码的相关资料,需要的朋友可以参考下
beforeCreate() 创建数据之前 created() 创建数据 我们在这里的得到我们在data里面创建的数据 beforeMount() // Dom渲染完成前 mounted() //Dom渲染完成 beforeUpdate() // 更新视图 在beforeUpdate触发时,视图已经更新完成 Updated() //更新数据调用的函数、。
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: {
 // 函数的形式
 export default{
 data(){
 return {
 a: 1
 }

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

不要用箭头函数来写里面的函数 this指向Vue的实例
计算属性的结果会被缓存,依赖的数据发生变化才会重新渲染 注意计算属性和methods,watch的区别
键值对。键是我们需要监督的数据,值是相应的回调函数 回调函数接受2个参数,新的值和旧的值(对于数组和对象不会出现旧值,对于简单的数据会出现旧值) 监听对象的内部值变化,需要添加deep:true(数组不用)
单向数据流,子组件不能修改传递过来的数据 对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。 可以规定接受的数据类型和默认值,如果是对象和数组,默认值导出是一个函数

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传递给父组件
// 父组件
// ponents
components: {
 hello
methods: {
 show(msg){ // 这里接受子组件传递的参数
 console.log(msg);
 hello @sendMsg='show' /hello // 这里不用传递参数,不然会覆盖子元素传递的参数

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

可以用来操作dom p ref="p" hello /p 可以用来组件中的通讯 在组件中使用的this.refs是一个对象,包含了所有的绑定了的dom和子组件
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 h1 ref="world" 这是world的dom元素 /h1 button @click='send' 给父元素传递dom /button /div methods: { send(){ this.$emit('give',this.$refs.world); //给父元素发送dom div 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传递过去

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


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://zzjzptp.cn/ziyuan/3357.html