Vue组件化通讯的实例代码

 <div id='app'> <p>{{msg}}</p></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> } }) 

 // 对象的形式 export default{ data: { a:1 } } // 函数的形式 export default{ data(){ return { a: 1 } } }

 export default{ methods: { plus() { this.a++ } } }

 // 当我们引用一个.vue文件的时候，就像使用这个文件来充当我们主体的一部分 <div> </div> import hello from './hello.vue' export default { components: { hello } } 

 {{this.total}} //[3,4] <button>添加数据</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 }) } } } 

 // 点击后相应的变化 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<a style="color:transparent">来@源gao*daima.com搞@代#码网</a>, oldVal){ console.log(val); //2 console.log(oldVal); //1 }, c:{ handler(val){ console.log(val); //{name: 'yx',age: 22} } } }, 

 // 父组件  //html components: { hello }, data(){ return { num: 3 } } //子组件 //1. 数组规定接受的数据 props: ['hello'] //2. 验证的方式 props:{ hello: Number, hello: [String, Number], hello: { type: Object, default(){ return {message: 'hello'} } } } 

 // 子组件 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); } }  // 这里不用传递参数，不然会覆盖子元素传递的参数 

 // html <h1>这是一个dom元素</h1> //dom元素  // 子组件 >-- 组件中this.refs => {myElement: h1, 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 <div class="world"> <h1>这是world的dom元素</h1><button>给父元素传递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) } } // 父元素  methods: { // 这里接受子元素传递过来的dom元素 '父亲自己的方法'(target) { this.refs.helloChild.changeDom(target) //调用另一个子元素的方法，并把dom传递过去 } }