局部组件 和 全局组件的创建和使用
-
全局组件创建:
Vue.component('组件名', {}) -
局部组件创建:
const 组件名 = {} -
在组件中，
data必须是一个函数，return一个对象 -
挂载子组件用
components
<body>
<div id="app">
<!--使用子组件 -->
<App></App>
</div>
<script src="./vue.js"></script>
<script>
//创建全局组件
Vue.component('Vheader', {
template: `
<div>
<h3>我是一个头部组件</h3>
</div>
`
})
//创建子组件
const Vcontent = {
data() {
return {
}
},
template: `
<div>
<h3>我是内容组件</h3>
</div>
`
}
const App = {
data() {
return {
msg: '我是App组件'
}
},
//挂载子组件
components: {
Vcontent,
},
template: `
<div>
<h3>{{msg}}</h3>
<button @click='handleClick'>按钮</button>
<!--使用子组件-->
<Vheader></Vheader>
<Vcontent></Vcontent>
</div>
`,
methods: {
handleClick() {
this.msg = '学习局部组件'
}
}
}
new Vue({
el: '#app',
data: {
},
components: {
//挂载子组件
App,
}
})
</script>
</body>
组件通信
父传子：通过props属性来进行通信
-
在子组件中声明props接收在父组件中挂载的属性
-
可以在子组件中的templata中任意使用
-
在父组件绑定自定义的属性
Vue.component('Child', {
template: `
<div>
<h3>我是子组件</h3>
<h4>{{childData}}</h4>//4.使用自定义属性插值
</div>
`,
props: ['childData']//3.props属性内接收父组件内自定义属性
})
const App = {
data() {
return {
msg: '我是父组件传进来的值' //1.父组件属性
}
},
template: `
<div>
<Child :childData='msg'></Child> //2.通过给子组件标签绑定自定义属性来传递msg
</div>
`,
}
子传父：通过this.$emit触发自定义事件
- 在父组件插入的子组件标签内绑定自定义事件
- 在子组件中触发原生的事件
- 在事件函数中通过
this.$emit触发自定义事件
Vue.component('Child', {
template: `
<div>
<h3>我是子组件</h3>
<!-- 1.绑定input事件，并插入子组件方法获得input的传值 -->
<input type="text" @input = 'handleInput' />
</div>
`,
methods: {
handleInput(e) {
const newVal = e.target.value;//2.接收传入的值并赋值给newVal
this.$emit('fatherHandler', newVal);//3.通过this.$emit触发父组件内子组件标签上的fatherHandler自定义事件，并将newVal传递给触发的isInput方法
}
}
})
const App = {
data() {
return {
newVal: ''//父组件为接收子组件的传值而声明的属性
}
},
template: `
<div>
<div class='father'>
数据:{{newVal}} //5.插入被赋值的属性
</div>
<Child @fatherHandler = 'isInput'></Child>//绑定自定义事件并触发父组件方法
</div>
`,
methods: {
isInput(newVal) {
this.newVal = newVal;//4.接收传入子组件数据，并赋值给父组件的属性
}
}
}
兄弟组件通信
const bus = new Vue();//0.Vue实例化创建一个bus中央事件总线作为公共对象
Vue.component('B', {
data() {
return {
count: 0
}
},
template: `
<div>{{count}}</div>
`,
created() {//1.通过created钩子函数，当组件被创建出来后初始化并立即调用内部函数
//$on绑定事件
bus.$on('add', (n) => {//2.给bus绑定函数add
this.count += n;//5.函数被调用并接收参数，赋值给当前组件的count属性
})
}
})
Vue.component('A', {
data() {
return {
count: 0
}
},
template: `
<div>
<button @click='handleClick'>+1</button>//3.组件绑定点击事件触发handleClick方法
</div>
`,
methods: {
handleClick() {
//$emit触发事件
bus.$emit('add', 1)//4.方法触发bus内的add函数并传参1
}
},
})
const App = {
template: `
<div>
<B></B>
<A></A>
</div>
`,
}
祖父组件传递
provide来提供对象，然后通过inject将需要的对象注入到子组件中
Vue.component('B', {
inject: ['msg'],//2.通过inject将接收到的对象注入到当前子组件
template: `
<div>{{msg}}</div>
`,
})
Vue.component('A', {
template: `
<div>
<B></B>
</div>
`,
})
const App = {
provide() { //1.provide是个函数，return出对象
return {
msg: '祖父组件数据'
}
},
template: `
<div>
<A></A>
</div>
`,
}
created() {
console.log(this.$parent.$parent.title);
},
