废话不多说，直接上干货。
在前端框架中，vue组件和路由是使用非常频繁的几个知识点，如果对这方面搞不懂，那么vue框架就不算熟练运用。
这篇文章就来说一下关于前端框架vue中的组件问题，包括（组件之间的传参，数据交互等）。
首先先介绍一下，组件，组件在开发过程中叫做组件化开发，也就是说将一个完整的页面，分离成一个个单独的组件，最终，由这些组件构成一个完整的页面，其好处是，可以实现组件的复用。
使用组件首先必须要注册组件，而注册组件有两种方式，一是全剧组件，二是局部组件。
㈠，全局组件的注册方式 贴代码1 注册全局组件
<body>
<div id=”app”>
<!– 使用组件：直接将组件名称作为标签名称来使用 –>
<hello></hello>
</div>
<script src=”./vue.js”></script>
<script>// 1 注册全局组件
// component
// 第一个参数：表示组件的名称
// 第二个参数：是一个配置对象，这个配置对象与 创建Vue实例时的配置对象几乎一样
Vue.component(‘hello’, {
// template 配置项
// 作用：指定组件的模板
template: ‘<h1>第一个组件</h1>’
})const vm = new Vue({
el: ‘#app’,
data: {}
})
</script>
</body>
在注册全局组件的时候需要注意的地方 ：
注意点：
1 template 选项必须有一个唯一的根节点
2 组件也有自己的数据，通过data配置项指定组件中的数据，但是，data是一个函数
3 Vue实例中的配置项，全都可以直接在 组件 中使用
比如：template / data() {} / 实例钩子函数 / methods / computed / watch / filters / directives
4 可以将组件看做一个特殊的Vue实例
（2）组件之间的通讯说明
组件有父子组件，有兄弟组件，各个组件之间肯定需要通讯。
1 组件是一个独立、封闭的个体
2 组件中的数据，默认情况下，只能在组件内部使用
3 在使用组件化开发项目的时候，多个组件之间可能需要相互配置，也就是说
可能需要使用另一个组件中的数据。这就产生了 组件之间通讯 的问题了
组件通讯 的三种情况：
1 父组件 将数据传递给 子组件
2 子组件 将数据传递给 父组件
3 非父子组件（兄弟）之间的通讯
2.1父组件数据传递给子组件用法：
<div id=”app”>
传递动态数据：
注意：需要通过 v-bind:parentmsg=”msg” 来作为动态传递的数据，此时，msg才表示 vm 实例中的数据msg；如果不加 v-bind: 那么 ‘msg’ 就是一个字符串
<hello :parentmsg=”msg” test=”666″></hello>
</div><script>
父组件： Vue实例
子组件： hello组件传递方法：通过属性传递的方式，来实现父子组件的通讯，属性也就是在div标签中
1 在组件中通过 props 配置项，来说明该组件能够接受什么样的数据
2 在使用组件的时候，通过 属性 的方式，来给组件传递数据Vue.component(‘hello’, {
template: `
<div>
<h1>这是子组件：hello</h1>
<p>子组件使用父组件中的数据msg： {{ parentmsg }} , {{ test }}</p>
</div>
`,
通过该配置执行组件能够接受的数据
props 的使用跟 data 中的数据一样
props: [‘parentmsg’, ‘test’]
})const vm = new Vue({
el: ‘#app’,
data: {
msg: ‘实例数据’
}
})
</script>
props的说明
props: [‘msg’],
methods: {
changeMsg() {
// 注意：这个操作，会导致 Vue 报错！！！
// this.msg = 666// 如果传递过来的 props 是一个对象， 可以在 子组件中修改对象中的属性
this.msg.name = 888// 结果为true，说明，子组件和父组件中引用了同一个对象
// console.log(this.msg === vm.parentmsg)
}
}
})const vm = new Vue({
el: ‘#app’,
data: {
// parentmsg: ‘父组件的数据’
parentmsg: {
name: ‘对象’
}
}
})
2.2 子组件传递给父组件的用法
<body>
<div id=”app”>
<!–
fn 表示要传递给子组件的方法名称
fn 的值是 getchildmsg，所以，调用 fn 就是调用 getchildmsg@fn 在 Vue 中叫做：自定义事件
@click 是内置事件，@fn 就是一个自定义事件
–>
<child @fn=”getchildmsg”></child>
</div>
<script src=”./vue.js”></script>
<script>
// 子组件 将数据传递给 父组件
// 子组件： child
// 父组件： Vue实例思路：
// 1 父组件提供一个方法
// 2 将创建好的方法，传递给子组件
// 3 由子组件调用传递过去的方法// 注册 child 组件
Vue.component(‘child’, {
template: `
<div>
<h1>子组件 child:</h1>
<button @click=”handleClick”>给父组件传递数据</button>
</div>
`,methods: {
handleClick() {
// 注意：无法直接通过 this.fn 获取到传递过来的方法
// console.log(‘单击事件触发了’, this.fn)
// 注意：需要通过 $emit() 来触发传递过来的方法// 第一个参数表示：要触发事件的名称，对应上面的 @fn
// 后面的参数表示：传递给父组件的数据
this.$emit(‘fn’, ‘child’)
}
}
})const vm = new Vue({
el: ‘#app’,
data: {},
methods: {
getchildmsg(arg) {
console.log(‘父组件中的方法 getchildmsg 被调用了’, arg)
}
}
})
</script>
</body>
2.3 兄弟组件之间的通讯
<div id=”app”>
<jack></jack>
<rose></rose>
</div><script src=”./vue.js”></script>
<script>
// 非父子组件（兄弟组件）：
// 场景：jack组件要对rose组件说： ‘i love u’
// 发送数据的组件：jack，触发事件，传递数据
// 接受数据的组件：rose，注册事件// 思路：
// 1 rose组件要接受数据，因此，rose组件注册事件 bus.$on(‘love’, () => {})
// 2 jack组件要传递数据，因此，jack组件触发事件 bus.$emit(‘love’, ‘要传递的数据’)// 创建一个bus
// bus 实际上就是一个空的vue实例
// 注意： 注册事件和触发事件需要使用同一个bus
const bus = new Vue()// jack组件
Vue.component(‘jack’, {
template: `
<div>
<h2>Jack组件：</h2>
<button @click=”sendLove”>告诉rose：i love u</button>
</div>
`,methods: {
sendLove() {
// jack触发事件，将数据作为参数传递
bus.$emit(‘love’, ‘i love u’)
}
}
})// rose组件
Vue.component(‘rose’, {
template: `
<div>
<h2>Rose组件：</h2>
<p>我是rose，jack你说啥？？？ {{ msg }}</p>
</div>
`,created() {
// 进入页面就注册事件
bus.$on(‘love’, (arg) => {
this.msg = arg
})
},data() {
return {
msg: ”
}
}
})const vm = new Vue({
el: ‘#app’,
data: {}
})
</script>
</body>
3.4 vue中关于局部组件的使用说明
<body>
<div id=”app”>
<hello></hello><!– <p1></p1> –>
<parent></parent>
</div><script src=”./vue.js”></script>
<script>
// Vue 中的局部组件：
// 只在当前实例（或组件）的模板中使用Vue.component(‘parent’, {
template: `
<div>
这是 parent 组件
<p1></p1>
<!– <hello></hello> –>
</div>
`,components: {
// p1 是局部组件，只能在父组件parent的模板中使用
p1: {
template: `
<div>这是 parent 组件中的子组件 p1</div>
`
}
}
})const vm = new Vue({
el: ‘#app’,
data: {},
// 通过 components 配置项创建局部组件
components: {
// hello 作为组件名称
// 此处的配置对象与 Vue.component(‘组件名称’, { 配置对象 }) 相同
// hello 是一个局部组件，只能在 父组件（vm实例） 的模板中使用
hello: {
template: `
<div>
这是 Hello 局部组件
</div>
`
}
}
})
</script>
</body>
以上就是关于vue中组件的基本使用方法
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
