Vue.js组件理解

<div id="app"> ???<table> ???????<tbody> ???????????<!--tbody里要用一个组件,但不能直接写组件名 ???????????????会导致位置错误问题，使用 is 属性将自定义组件row ???????????????与 tr 标签绑定在一起 ???????????--> ???????????<tr is=‘row‘></tr> ???????????<tr is=‘row‘></tr> ???????????<tr is=‘row‘></tr> ???????</tbody> ???</table> ???????????<ul> ???????????<li is=‘row‘></li> ???????????<li is=‘row‘></li> ???????????<li is=‘row‘></li> ???????</ul></div><script> ???????Vue.component(‘row‘, { ???????template: ‘<tr><td>this is a row</td></tr>‘ ???}); ???????var vm = new Vue({ ???????el: "#app" ???}); ???</script>

Vue.component(‘row‘, { ???//在子组件中，data 必须是一个函数 ???data: function(){ ???????return { ???????????content: ‘this is a row‘ ???????} ???}, ???template: ‘<tr><td>{{content}}</td></tr>‘});

<div id="app"> ???<counter ref="one" @change="handleChange"></counter> ???<counter ref="two" @change="handleChange"></counter> ???<div>{{total}}</div></div><script> ???????Vue.component(‘counter‘,{ ???????template: ‘<div @click="handleClick">{{number}}</div>‘, ???????data: function(){ ???????????return { ???????????????number: 0 ???????????} ???????}, ???????methods: { ???????????handleClick: function() { ???????????????this.number ++; ???????????????// $emit() 自定义事件向父组件通信 ???????????????this.$emit(‘change‘); ???????????} ???????} ???}); ???????var vm = new Vue({ ???????el: "#app", ???????data: { ???????????total: 0 ???????}, ???????methods: { ???????????handleChange: function() { ???????????????//可以使用自加一方法 ???????????????//this.total++; ???????????????//也可以求二者之和 ???????????????// 通过 $refs 获取子组件的引用，再获取数据 ???????????????this.total = this.$refs.one.number + this.$refs.two.number; ???????????} ???????} ???});

<div id="app"> ???<!--父往子传递--> ???<!--父组件通过绑定属性的形式向子组件传递数据--> ???<counter :count="3" @inc="handleIncrease"></counter> ???<counter :count="2" @inc="handleIncrease"></counter> ???????<!--子往父传递--> ???<!--子组件通过事件触发的形式向父组件传递数据--> ???<div>{{total}}</div></div><script> ???var counter = { ???????props: [‘count‘], ???????data: function() { ???????????return { ???????????????//定义一个number 把获取来的数据克隆一个传进去 ???????????????number: this.count ???????????} ???????}, ???????template: ‘<div @click="handleClick">{{number}}</div>‘, ???????methods: { ???????????handleClick: function() { ???????????????this.number += 2; ???????????????//子组件通过点击将事件触发出去 ???????????????this.$emit(‘inc‘, 2) ???????????} ???????} ???} ???var vm = new Vue({ ???????el: "#app", ???????components: { ???????????counter: counter ???????}, ???????data: { ???????????total: 5 ???????}, ???????methods: { ???????????// 父组件执行的函数里可以直接接收到 $emit()的参数 ???????????handleIncrease: function(step) { ???????????????this.total += step; ???????????} ???????} ???});

<div id="app"> ???<child :content="123"></child></div><script> ???????Vue.component(‘child‘,{ ???????props: { ???????????//设定子组件接收的content 属性， ???????????// ?要么是数字,要么是字符串 ???????????content: [String, Number] ???????????/* ???????????也可以这样写： ???????????content: { ???????????????//类型 ???????????????type: String, ???????????????????????????????//设定这个属性是必须的 ???????????????required: true, ???????????????????????????????//如果不给default 传数值，默认default ???????????????default: ‘default value‘, ???????????????????????????????//对传入 content属性 添加校验 ???????????????//规定长度必须大于5 ???????????????validator: function(value) { ???????????????????return (value.length > 5) ???????????????} ???????????} ???????????*/ ???????}, ???????template: ‘<div>{{content}}</div>‘ ???}) ???????var vm = new Vue({ ???????el: "#app" ???}); ???

<div id="app"> ???<!-- ???????加native修饰符，监听原生点击事件, ???????方法同子组件设置自定义事件向父组件触发 ???--> ???<child @click.native=‘handleClick‘></child></div><script> ???Vue.component(‘child‘,{ ???????template: ‘<div>child</div>‘ ???}) ???var vm = new Vue({ ???????el: "#app", ???????methods: { ???????????handleClick: function() { ???????????????alert(‘click‘) ???????????} ???????} ???});</script>

<!--非父子组件传值 ???Bus / 总线 / 发布订阅模式 / 观察者模式--><div id="app"> ???<!--点击一个，另一个变成相同的--> ???<child content=‘anqw‘></child> ???<child content=‘joe‘></child></div><script> ???//每一个Vue 实例都会有bus 属性 ???Vue.prototype.bus = new Vue() ???????Vue.component(‘child‘,{ ???????data: function() { ???????????return { ???????????????//父组件传过来的数据只能用不能改， ???????????????//所以需要拷贝一份 ???????????????selfContent: this.content ???????????} ???????}, ???????props: { ???????????content: String ???????}, ???????template: ‘<div @click="handleClick">{{selfContent}}</div>‘, ???????methods: { ???????????handleClick: function() { ???????????????//实例上挂载的bus ，这个bus 又是Vue 实例， ???????????????//所以会有$emit()方法，同时把内容传进参数 ???????????????this.bus.$emit(‘change‘,this.selfContent); ???????????} ???????}, ???????//借助生命周期钩子,被挂载时执行 ???????//$on 方法监听自定义事件 ???????mounted: function() { ???????????//固定this的指向 ???????????var this_ = this; ???????????this.bus.$on(‘change‘, function(msg) { ???????????????this_.selfContent = msg ???????????}) ???????} ???}) ???var vm = new Vue({ ???????el: "#app" ???});

<div id="app"> ???<child> ???????<!--插槽--> ???????<!--如果不传标签会显示默认内容--> ???????<h1>Anqw</h1> ???</child></div><script> ???Vue.component(‘child‘,{ ???????//slot插槽中显示的是父组件插入的标签 ???????template: ‘<div><p>hello</p><slot>默认内容</slot></div>‘ ???}) ???var vm = new Vue({ ???????el: "#app" ???}); ???</script>

<div id="app"> ???<body-content> ???????<div class="header" slot=‘header‘>header</div> ???????<div class="footer" slot=‘footer‘>footer</div> ???</body-content></div><script> ???Vue.component(‘body-content‘,{ ???????//将插槽一一对应，用slot 与 name 属性绑定 ???????template: `<div> ???????????????????????<slot name=‘header‘></slot> ???????????????????????<div class="content"> ???????????????????????????content ???????????????????????</div> ???????????????????????<slot name=‘footer‘></slot> ???????????????????</div>` ???}); ???var vm = new Vue({ ???????el: "#app" ???}); ???</script><!-- ???显示结果： ???header ???content ???footer-->

<div id="app"> ???<child> ???????<!--首先父组件内传了一个插槽, ???????????作用域插槽，必须用 template 标签包裹, ???????????同时声明从子组件接收的数据都放在props中, ???????????slot-scope 对应的属性名接收到数据后， ???????????以li的形式进行展示. ???????--> ???????<template slot-scope="props"> ???????????<!--由父组件传递循环对应的模板--> ???????????<li>{{props.item}} - hello</li> ???????</template> ???</child></div><script> ???Vue.component(‘child‘,{ ???????data: function() { ???????????return { ???????????????list: [1,2,3,4] ???????????} ???????}, ???????//当子组件做循环，DOM结构需要由外部传递时 ???????template: `<div> ???????????????????????<ul> ???????????????????????????<slot ????????????????????????????????v-for="item of list" ????????????????????????????????:item="item"> ???????????????????????????</slot> ???????????????????????</ul> ???????????????????</div>` ???}); ???var vm = new Vue({ ???????el: "#app" ???}); ???</script>

<div id="app"> ???<!--动态组件--> ???<!--会根据 is 中数据的变化去加载不同的组件--> ???<!--<component :is="type"></component>--> ???????<child-one v-if="type === ‘child-one‘"></child-one> ???<child-two v-if="type === ‘child-two‘"></child-two> ???????<button @click="handleClick">change</button> ???????<!--当点击button时 两个组件 toggle显示--></div><script> ???Vue.component(‘child-one‘,{ ???????// v-once 可以把组件暂时放到内存里, ???????// ?点击之后直接从内存里取出就行,提高了性能 ???????template: ‘<div v-once>child-one</div>‘ ???}); ???Vue.component(‘child-two‘,{ ???????template: ‘<div v-once>child-two</div>‘ ???}); ???var vm = new Vue({ ???????el: "#app", ???????data: { ???????????type: ‘child-one‘ ???????}, ???????methods: { ???????????handleClick: function() { ???????????????this.type = (this.type === ‘child-one‘? ???????????????????‘child-two‘: ‘child-one‘); ???????????} ???????} ???});</script>