Vue组件化通讯的实例代码
1. Vue的组成文件(.vue)分为三部分,分别对应html,js,css 2. Vue的生命周期函数
{{msg}} var app = new Vue({ {{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 组件只接受函数 methods(一些指令和其他属性的调用方法)
1、components (组件化定义)类型: Object 自定义元素,增加代码的复用性 import hello from './hello.vue' 2、computed(计算属性)
添加数据 //点击会更新this.total
export default { watch(监听对应的数据)
props(用于接受父组件传来的数据)
//html
components: {
hello
},data(){
return {
num: 3
}
}
//子组件 v-on和v-emit(子组件向父元素传递数据)vm.$emit: 子元素向父元素定义讯号和传递数据 this.$emit('规定的讯号名称','想传递给父元素的数据') vm.$on: 监听讯号,并触发相应的函数(函数内部不用传参) @'规定的讯号名称'='调用自己组件的方法并可以接受传递的参数' // 父组件
// 引入子组件,并定义components components: { hello },methods: { show(msg){ // 这里接受子组件传递的参数 console.log(msg); } } <hello @sendMsg='show'> // 这里不用传递参数,不然会覆盖子元素传递的参数 ref(用来获取dom和子组件)
//dom元素
methods: {
send(){
this.$emit('give',this.$refs.world); //给父元素发送dom
}
// 运用(在父元素中调用子元素的方法) //如果有一个需求是,一个父元素有2个子组件,其中一个子组件的方法要调用另一个子组件的dom元素 // 父元素 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |