<div id="example">
<my-component>my-component>
div>
<script>
// 注册组件
// 1、 my-component 就是组件中自定义的标签名
Vue.component('my-component', {
template: 'A custom component!'
})
// 创建根实例
new Vue({
el: '#example'
})
script>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
<hello-world>hello-world>
div>
<script type="text/javascript">
//5 如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,
// 7、但是在普通的标签模板中,必须使用短横线的方式使用组件
Vue.component('HelloWorld', {
data: function(){
return {
msg: 'HelloWorld'
}
},
template: '{{msg}}'
});
Vue.component('button-counter', {
// 1、组件参数的data值必须是函数
// 同时这个函数要求返回一个对象
data: function(){
return {
count: 0
}
},
// 2、组件模板必须是单个根元素
// 3、组件模板的内容可以是模板字符串
template: `
# 6 在字符串模板中可以使用驼峰的方式使用组件
`,
methods: {
handle: function(){
this.count += 2;
}
}
})
var vm = new Vue({
el: '#app',
data: {
}
});
script>
<div id="app">
<my-component>my-component>
div>
<script>
// 定义组件的模板
var Child = {
template: 'A custom component!'
}
new Vue({
//局部注册组件
components: {
// 将只在父模板可用 一定要在实例上注册了才能在html文件中使用
'my-component': Child
}
})
script>
<div id="app">
<div>{{pmsg}}div>
<menu-item title='来自父组件的值'>menu-item>
<menu-item :title='ptitle' content='hello'>menu-item>
div>
<script type="text/javascript">
Vue.component('menu-item', {
// 3、 子组件用属性props接收父组件传递过来的数据
props: ['title', 'content'],
data: function() {
return {
msg: '子组件本身的数据'
}
},
template: '{{msg + "----" + title + "-----" + content}}'
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
ptitle: '动态绑定属性'
}
});
script>
$emit()
触发事件$emit()
第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
<div id="app">
<div :style='{fontSize: fontSize + "px"}'>{{pmsg}}div>
<menu-item :parr='parr' @enlarge-text='handle($event)'>menu-item>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
/*
子组件向父组件传值-携带参数
*/
Vue.component('menu-item', {
props: ['parr'],
template: `
- {{item}}
### 1、子组件用$emit()触发事件
### 第一个参数为 自定义的事件名称 第二个参数为需要传递的数据
`
});
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
parr: ['apple','orange','banana'],
fontSize: 10
},
methods: {
handle: function(val){
// 扩大字体大小
this.fontSize += val;
}
}
});
script>
<div id="app">
<div>父组件div>
<div>
<button @click='handle'>销毁事件button>
div>
<test-tom>test-tom>
<test-jerry>test-jerry>
div>
<script type="text/javascript" src="js/vue.js">script>
<script type="text/javascript">
/*
兄弟组件之间数据传递
*/
//1、 提供事件中心
var hub = new Vue();
Vue.component('test-tom', {
data: function(){
return {
num: 0
}
},
template: `
TOM:{{num}}
`,
methods: {
handle: function(){
//2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据) 触发兄弟组件的事件
hub.$emit('jerry-event', 2);
}
},
mounted: function() {
// 3、接收数据方,通过mounted(){} 钩子中 触发hub.$on(方法名
hub.$on('tom-event', (val) => {
this.num += val;
});
}
});
Vue.component('test-jerry', {
data: function(){
return {
num: 0
}
},
template: `
JERRY:{{num}}
`,
methods: {
handle: function(){
//2、传递数据方,通过一个事件触发hub.$emit(方法名,传递的数据) 触发兄弟组件的事件
hub.$emit('tom-event', 1);
}
},
mounted: function() {
// 3、接收数据方,通过mounted(){} 钩子中 触发hub.$on()方法名
hub.$on('jerry-event', (val) => {
this.num += val;
});
}
});
var vm = new Vue({
el: '#app',
data: {
},
methods: {
handle: function(){
//4、销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
hub.$off('tom-event');
hub.$off('jerry-event');
}
}
});
script>
<div id="app">
<alert-box>有bug发生alert-box>
<alert-box>有一个警告alert-box>
<alert-box>alert-box>
div>
<script type="text/javascript">
/*
组件插槽:父组件向子组件传递内容
*/
Vue.component('alert-box', {
template: `
ERROR:
# 当组件渲染的时候,这个 元素将会被替换为“组件标签中嵌套的内容”。
# 插槽内可以包含任何模板代码,包括 HTML
默认内容
`
});
var vm = new Vue({
el: '#app',
data: {
}
});
script>
body>
html>
标题信息
主要内容1
主要内容2
底部信息信息
标题信息1
标题信息2
主要内容1
主要内容2
底部信息信息1
底部信息信息2