创建全局组件的第一种方式
1.先调用’Vue.extend()'得到组件的构造函数
2.通过Vue.component(‘组件名称’, 组件的构造函数)来注册全局组件
3.把注册好的组件名称以标签的形式引入到页面中
<div id="app">
<mycom1></mycom1>
</div>
<script src="./vue.js"></script>
<script>
const com1 = Vue.extend({
template: '<h1>这是创建组件的第一种方式</h1>'
})
// 使用Vue.component向全局注册一个组件
// Vue.component('组件名称', 组件的构造函数)
Vue.component('mycom1', com1)
const vm = new Vue({
el: '#app',
data: {}
})
</script>
输出
这是创建全局组件的第一种方式
创建全局组件的第二种方式
<div id="app">
<mycom2></mycom2>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('mycom2', {
template: '<h2>这是创建全局组件的第二种方式</h2>'
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
输出
这是创建全局组件的第二种方式
创建全局组件的第三种方式
<div id="app">
<mycom3></mycom3>
</div>
<template id="tmpl">
<h3>这是创建全局组件的第三种方式</h3>
</template>
<script src="./vue.js"></script>
<script>
Vue.component('mycom3', {
template: '#tmpl'
})
const vm = new Vue({
el: '#app',
data: {}
})
</script>
输出
这是创建全局组件的第三种方式
创建局部组件
<div id="app">
<mycom4></mycom4>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {},
components: {
'mycom4': {
template: '<h6>这是创建的局部组件</h6>'
}
}
})
</script>
输出
这是创建的局部组件
父组件向子组件传递数据
1.把要传递给子组件的数据，作为自定义属性通过’v-bind’，绑定到子组件身上
2.子组件通过props接收
<div id="app">
<com1 :msg="parentMsg"></com1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
parentMsg: '这是父组件中的内容'
},
components: {
'com1': {
props: ['msg'],
template: `
<h3>这是子组件中的标题： {
{msg}}</h3>
`
}
}
})
</script>
输出
这是子组件中的标题： 这是父组件中的内容
父组件向子组件传递对象
1.把要传递给子组件的对象，作为自定义属性通过’v-bind’，绑定到子组件身上
2.子组件通过props接收
<div id="app">
<com1 :msg="msgObj"></com1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
msgObj: {
name: '张三',
address: '北京'
}
},
components: {
'com1': {
props: ['msg'],
template: `
<h3>这是子组件中的内容： {
{JSON.stringify(msg)}}</h3>
`
}
}
})
</script>
输出
这是子组件中的内容： {"name":"张三","address":"北京"}
父组件向子组件传递方法
1.把要传递给子组件的方法，通过事件绑定’v-on’，绑定到子组件身上
2.子组件通过this.$emit()方法调用传递过来的方法
<div id="app">
<com1 @fun="show"></com1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {},
methods: {
show() {
console.log('有人调用了父组件中的show方法');
}
},
components: {
'com1': {
template: `
<input type="button" value="这是子组件中按钮" @click="btnClick"/>
`,
methods: {
btnClick() {
this.$emit('fun')
}
}
},
}
})
</script>
输出
有人调用了父组件中的show方法
子组件向父组件传值
本质上调用父组件传递过来的方法，子组件在调用的时候，把数据当作参数传给父组件的方法
<div id="app">
<com1 @fun="show"></com1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
parentMsg: ''
},
methods: {
show(ag1) {
this.parentMsg = ag1
console.log(this.parentMsg);
}
},
components: {
'com1': {
template: `
<input type="button" value="这是子组件中按钮" @click="btnClick"/>
`,
data() {
return {
sonMsg: '这是子组件的数据'
}
},
methods: {
btnClick() {
this.$emit('fun', this.sonMsg)
}
}
},
}
})
</script>
输出
这是子组件的数据