博主微信:jiayou321xiaoyu 加微信,备注:前端Tree

前端框架之vue组件的使用规则总结篇

vue框架 admin 259℃ 0评论

废话不多说,直接上干货。

在前端框架中,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中组件的基本使用方法

转载请注明:前端Tree » 前端框架之vue组件的使用规则总结篇

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址