/**
* Vue.js
* 子组件建议DropdownMenu || dropdownMenu 引用的时候 <dropdown-menu>
* 建议给组件一个根节点 保证组件元素上的指令和特性能正确的转换 性能也会更好
*/
<div id="example">
<my-component></my-component>
</div>
<script>
// 注册全局组件 方法一.
// 创建一个组件构造器
let MyComponent = Vue.extend({
// 组件里的data对象 必须以函数形式返回
// 为了避免所有实例共享一个data 可以互相修改
data (){
return {info : 'relative'}
},
template : '<p>测试数据</p>',
// replace :
// false 不替换挂在标签
// true 替换挂在标签
replace : false
});
// 注册全局组件
// Vue.component(组件名, 组件构造器)
// 组件名建议小写 并且包含一个 -
Vue.component('my-component', MyComponent);
new Vue({
el : '#example'
});
// 注册全局组件 方法二.
// 注册语法糖
// 可以省略组件构造器 直接传入对象
// replace :
// false 不替换挂在标签
// true 替换挂在标签
Vue.component('my-component', {
// 组件里的data对象 必须以函数形式返回
// 为了避免所有实例共享一个data 可以互相修改
data (){
return {info : 'relative'}
},
// 子组件的模板
// 可以是id, class模式 template : '#模板的id值 || class值'
template : '<p>测试数据1</p>',
replace : false
});
new Vue({
el : '#example'
});
// 注册局部组件
// 定义局部注册组件名称
let Parent = new Vue.extend({
// 根据局部组件创建根实例
el : '#example',
components : {
'my-component' : {
// 组件里的data对象 必须以函数形式返回
// 为了避免所有实例共享一个data 可以互相修改
data (){
return {info : 'absolute'}
},
template : '<p>测试数据2</p>',
replace : true
}
}
});
</script>
<div id="example">
// 把一个普通字符串传递给子组件的my-message变量
<my-component my-message="hello"></my-component>
</div>
<script>
// props 父组件向子组件传递数据
Vue.component('my-component', {
// my-message 用在子组件内需要去掉- 用驼峰方式
props : ['myMessage'],
template : '<p>{{myMessage}}</p>',
replace : false
});
// 实例化
new Vue({
el : 'body'
});
</script>
<div>
<input type="text" v-model="parentMsg">
// 绑定动态props v-bind:my-message="parentMsg"
<my-component v-bind:my-message="parentMsg"></my-component>
</div>
<script>
// props 父组件向子组件传递数据
Vue.component('my-component', {
// my-message 用在子组件内需要去掉- 用驼峰方式
props : ['myMessage'],
template : '<p>{{myMessage}}</p>',
replace : false
});
// 实例化
new Vue({
el : 'body',
data : {
parentMsg : ''
}
});
</script>
// 父子组件的例子
<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>
<script>
// 注册子组件
Vue.component('child', {
// 组件需要有自己的模板
template : '#child-template',
data (){
return { msg: 'hello' }
},
methods : {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})
// 初始化父组件 子组件在父组件内一起初始化 不用再单独初始化子组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
// 父组件的模板
el: '#events-example',
data: {
messages: []
},
// 在创建实例时 events 选项简单地调用 $on
events: {
'child-msg': function (msg) {
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg)
}
}
})
</script>
// 注册v-ref _________________________________________________
// 子组件 module.vue
<template>
<p>我是子组件</p>
</template>
<script>
export default {
methods : {
alert (){
console.log('父组件输出子组件的值');
}
}
};
</script>
// 父组件 parent.vue
<template>
// 注册v-ref
<user v-ref:child></user>
</template>
<script>
import user from './1.vue';
export default {
ready (){
// this.$refs.child 包含注册有v-ref的子组件
// 调用子组件的alert方法
this.$refs.child.alert();
},
components : {
user
}
}
</script>
// js入口 parent.js
<script>
import wangliang from './wangliang/wangliang.vue';
let parent = new Vue({
el : 'body',
components : {
wangliang
}
})
</script>
// Slot 分发内容 _________________________________________________
// 单个Slot
// 父模板
<template>
<child>
// 如果父组件内没有内容 显示子组件内容
<p>父组件</p>
</child>
</template>
<script>
import child from './child.vue';
export default {
components : {
child
}
}
</script>
// 子组件
<template>
<div>
<slot>
如果没有分发内容则显示我。
</slot>
<h1>子组件</h1>
</div>
</template>
// 入口js
<script>
import wangliang from './wangliang/wangliang.vue';
let parent = new Vue({
el : 'body',
components : {
wangliang
}
})
</script>
// 具名 Slot _________________________________________________
// 父组件
<template>
<child>
// one会查找子组件里的 <slot name="one"></slot>
// 如果找不到不显示默认内容 <slot name="one"></slot> 里的默认值
<p slot="one">One</p>
// two会查找子组件里的 <slot name="two"></slot>
<p slot="two">Two</p>
<p>父组件</p>
</child>
</template>
<script>
import child from './child.vue';
export default {
components : {
child
}
}
</script>
// 子组件
<template>
<div>
<slot name="one"></slot>
// 必须当父组件里一点内容都没有 才会显示默认内容
<slot>父组件没有内容 显示这里的值</slot>
<slot name="two"></slot>
</div>
</template>
// 入口js
<script>
import wangliang from './wangliang/wangliang.vue';
let parent = new Vue({
el : 'body',
components : {
wangliang
}
})
</script>
// 动态组件 : 多个组件可以使用同一个挂载点 然后动态地在它们之间切换 使用保留的
// <component> 元素 动态地绑定到它的 is 特性
// 父组件
<template>
// component 添加:is 通过改变变量currentView值可以动态切换组件
// keep-alive : 把切换出去的组件保留在内存中 避免重新渲染
<component :is="currentView" keep-alive></component>
<div v-on:click="fn">点我切换</div>
</template>
<script>
import child1 from './child1.vue';
import child2 from './child2.vue';
export default {
data (){
return {
currentView : 'child1',
currentView2 : 'child2'
}
},
methods : {
fn (){
this.currentView = 'child2';
}
},
components : {
child1,
child2
}
}
</script>
// 子组件 1
<template>
<div>测试数据 1</div>
</template>
// 子组件 2
<template>
<div>测试数据 2</div>
</template>
// 入口js
<script>
import wangliang from './wangliang/wangliang.vue';
let parent = new Vue({
el : 'body',
components : {
wangliang
}
})
</script>
// 组件和v-for _________________________________________________
<template>
// v-for的参数可以通过 v-bind传递给子组件
<child1 v-for="item in data" v-bind:item="item" v-bind:index="$index"></child1>
</template>
<script>
import child1 from './child1.vue';
export default {
data (){
return {
data : [1, 2, 3]
}
},
components : {
child1
}
}
</script>
// 子组件
<template>
// 显示父组件的item index
{{item}} - {{index}}
</template>
<script>
export default {
props : ['item', 'index']
};
</script>
// 组件自定义事件 @事件名 _________________________________________________
// 父组件
<template>
<child1 @listener="method"></child1>
</template>
<script>
import child1 from './child1.vue';
export default {
methods : {
method (){
console.log('子组件事件触发');
}
},
components : {
child1
}
}
</script>
// 子组件
<template>
// 注册点击事件 触发事件名是父组件自定义的事件名
<div v-on:click="method">点击</div>
</template>
<script>
export default {
methods : {
method (){
// 通过$dispatch派发事件 触发父组件自定义事件
this.$dispatch('listener', '参数')
}
}
};
</script>
// 入口
<script>
import wangliang from './wangliang/wangliang.vue';
let parent = new Vue({
el : 'body',
components : {
wangliang
}
})
</script>