局部组件
<body>
<div id="app">
<!-- 使用组件H -->
<H></H>
</div>
<script src="./vue.js"></script>
<script>
// 定义一个组件H
const H = {
// template包含HTML模板内容
template: `<div>
<h1>Hello world!</h1>
<button @click="onClick">click</button>
<p>{{msg}}</p>
</div>
`,
// 定义的数据
data() {
return {
msg: 'hello'
}
},
// 组件内方法
methods: {
onClick() {
alert("click")
},
},
created() {
console.log("组件创建时触发")
},
};
// 创建vue实例app，可以有多个
var app = new Vue({
// el：提供一个页面上已存在的DOM元素作为vue实例挂载的目标，可以用vm.$el访问
el: '#app',
/*
*components：以key:value的形式注册组件，如"h":H
*也可以直接使用组件名命名，如H
*需要注意的是，HTML中不区分大小写
*/
components: {
H,
}
})
</script>
</body>
全局组件
Vue.component('mr', {
template: `
<h5>全局组件</h5>
`
})
- 参数一 表示组件id
- 参数二 表示组件配置信息
- 全局组件定义完成之后可以直接使用，不需要注册
组件间传值
子组件向父组件传值
子组件向父组件传值,通过事件派发，在vue中使用$emit实现事件派发
<body>
<div id="app">
<p>子组件传给父组件的数据：{{childData}}</p>
<counter @countadd="childAdd"></counter>
</div>
<script src="./vue.js"></script>
<script>
const counter = {
template: `<button @click="onClick">子组件:{{count}}</button>`,
data() {
return {
count: 0,
}
},
methods: {
onClick() {
this.count += 1;
//参数一表示事件的名字
//参数二表示传递的参数
this.$emit('countadd', this.count);
}
}
}
var app = new Vue({
el: '#app',
components: {
counter,
},
data: {
childData: 0,
},
methods: {
childAdd(value) {
this.childData = value;
}
}
})
</script>
</body>
父组件向子组件传值
父组件向子组件传值,通过props
<body>
<div id="app">
<p>父组件的数据：{{parentData}}</p>
<counter :parent='this.parentData' step='父组件数据2'></counter>
</div>
<script src="./vue.js"></script>
<script>
const counter = {
template: `
<div>
<p @click="onClick">子组件接收数据：{{count}}</p>
<p>子组件接收数据：{{this.parent}}</p>
</div>
`,
data() {
return {
count: '0',
}
},
props: ['parent', 'step'],
methods: {
onClick() {
this.count = this.step;
}
}
}
var app = new Vue({
el: '#app',
components: {
counter,
},
data: {
parentData: '父组件数据1',
},
})
</script>
</body>
非相关组件间传值
事件总线 用来解决非相关组件之间传值
我们使用一个空白的对象单独用来做事件的派发和监听
常见的应用场景是游戏开发
在vue中通过$on监听事件 通过$emit派发事件
<body>
<div id="app">
<count1></count1>
<count2></count2>
</div>
<script src="./vue.js"></script>
<script>
//组件1传值
const count1 = {
template: `<button @click="onClick">点击传值1</button>`,
methods: {
onClick() {
eventBus.$emit('aa', 1)
}
}
}
//组件2接收值
const count2 = {
template: `<p>接收数据：{{count}}</p>`,
data() {
return {
count: 0
}
},
created() {
eventBus.$on('aa', this.add);
},
methods: {
add(v) {
this.count += v;
}
}
}
//定义一个空白对象作事件监听和触发
var eventBus = new Vue();
var app = new Vue({
el: '#app',
components: {
count1,
count2
}
})
</script>
</body>
