Vue 组件
Posted hybb
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 组件相关的知识,希望对你有一定的参考价值。
组件
组件树
通常一个应用会以一棵嵌套的组件树的形式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过 Vue.component
全局注册的:
Vue.component('my-component-name', {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue
) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <App></App>-->
</div>
<script src="../vue.js"></script>
<script>
/* 如果仅仅是实例化vue对象中,既有el,又有template,如果template中定义模板中内容
那么template的优先级大于el */
// 第一个是组件的名字,第二个是options 它是全局组件
// <slot></slot> vue提供的内置组件 会分发内容
Vue.component('VBtn', {
data: function () {
return {}
},
template: `
<button>
<slot></slot>
</button>
`
});
// 1.声子(声明) Vue中组件的名字 首字母要大写 跟标签区分
let Vheader = {
data: function () {
return {}
},
// 定义模板内容
template: `
/* Component template should contain exactly one root element
子组件应该有一个根元素 */
<div>
<h2>mhy</h2>
<h2>mhy</h2>
<VBtn></VBtn>
</div>
`
};
let App = {
data: function () {
return {
text: "我是一个日天2"
}
},
template: `
<div id="a">
<h2>{{ text }}</h2>
<Vheader></Vheader>
<VBtn>登录</VBtn>
<VBtn>注册</VBtn>
</div>
`,
methods: {},
components: {
Vheader,
}
};
// APP header asibe content
let vm = new Vue({
el: '#app',
data: function () {
return {
msg: 'alex'
}
},
// 用子(使用)
template: `
<App />
`,
components: {
// 2.挂子(挂载)
// 如果key和value一样,可以只写一个
// App:App
App
}
});
</script>
</body>
</html>
局部组件
打油诗:声子 挂子 用子
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
<script src="../vue.js"></script>
<script>
/* 如果仅仅是实例化vue对象中,既有el,又有template,如果template中定义模板中内容
那么template的优先级大于el */
let vm = new Vue({
el: '#app',
data: function () {
return {
msg: 'alex'
}
},
template: `
<div class="app">
<h2>{{ msg }}</h2>
</div>
`
});
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="../vue.js"></script>
<script>
/* 如果仅仅是实例化vue对象中,既有el,又有template,如果template中定义模板中内容
那么template的优先级大于el */
// 1.声子(声明) Vue中组件的名字 首字母要大写 跟标签区分
let Vheader = {
data: function () {
return {}
},
// 定义模板内容
template: `
/* Component template should contain exactly one root element
子组件应该有一个根元素 */
<div>
<h2>mhy</h2>
<h2>mhy</h2>
</div>
`
};
let App = {
data: function () {
return {
text: "我是一个日天"
}
},
template: `
<div id="a">
<h2>{{ text }}</h2>
<Vheader></Vheader>
</div>
`,
methods: {},
components: {
Vheader
}
};
// APP header asibe content
let vm = new Vue({
el: '#app',
data: function () {
return {
msg: 'alex'
}
},
// 用子(使用)
components: {
// 2.挂子(挂载)
// 如果key和value一样,可以只写一个
// App:App
App
}
});
</script>
</body>
</html>
- 声明子
let App = {
data:function(){
return {}
},
template:`
<div>
</div>
`
}
挂子
挂载哪个组件,那个组件就为我的父组件
new Vue({
...,
template:`
<!-- 用子 -->
<App/>
`
components:{
// 挂子
App
}
})
组建的嵌套
单向数据流
父子组件传值
父 --> 子
props
- 在子组件中,使用
props
声明 可以在子组件中任意使用, - 父组件往子组件传值,要自定义属性
到这里,我们只看到了以字符串数组形式列出的 prop:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
但是,通常你希望每个 prop 都有指定的值类型。这时,你可以以对象形式列出 prop,这些属性的名称和值分别是 prop 各自的名称和类型:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
这不仅为你的组件提供了文档,还会在它们遇到错误的类型时从浏览器的 javascript 控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它 prop 验证。
传递静态或动态 Prop
像这样,你已经知道了可以像这样给 prop 传入一个静态的值:
<blog-post title="My journey with Vue"></blog-post>
你也知道 prop 可以通过 v-bind
动态赋值,例如:
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post
v-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
在上述两个示例中,我们传入的值都是字符串类型的,但实际上任何类型的值都可以传给一个 prop。
传入一个数字
<!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
传入一个布尔值
<!-- 包含该 prop 没有值的情况在内,都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>
传入一个数组
<!-- 即便数组是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
传入一个对象
<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>
传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为 prop 传入,你可以使用不带参数的 v-bind
(取代 v-bind:prop-name
)。例如,对于一个给定的对象 post
:
post: {
id: 1,
title: 'My Journey with Vue'
}
下面的模板:
<blog-post v-bind="post"></blog-post>
等价于:
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <App></App>-->
</div>
<script src="../vue.js"></script>
<script>
/* 如果仅仅是实例化vue对象中,既有el,又有template,如果template中定义模板中内容
那么template的优先级大于el */
Vue.component('VBtn', {
data: function () {
return {}
},
props:['id'],
template: `
<button>
{{ id }}
</button>
`
});
// 1.声子(声明) Vue中组件的名字 首字母要大写 跟标签区分
let Vheader = {
data: function () {
return {}
},
// 只要声明父组件的属性,就可以使用
props: ['msg','post'],
// 定义模板内容
template: `
/* Component template should contain exactly one root element
子组件应该有一个根元素 */
<div class="child">
<h2>mhy</h2>
<h2>{{ msg }}</h2>
<h3>{{ post.title }}</h3>
<h3>{{ post.id }}</h3>
<VBtn v-bind:id="post.id"></VBtn>
</div>
`
};
let App = {
data: function () {
return {
text: "我是父组件的数据",
post: {
id: 2,
title: 'my ccc'
}
}
},
template: `
<div id="a">
<h2>{{ text }}</h2>
<Vheader v-bind:msg="text" v-bind:post="post"></Vheader>
</div>
`,
methods: {},
components: {
Vheader,
}
};
// APP header asibe content
let vm = new Vue({
el: '#app',
data: function () {
return {
msg: 'alex'
}
},
// 用子(使用)
template: `
<App />
`,
components: {
// 2.挂子(挂载)
// 如果key和value一样,可以只写一个
// App:App
App
}
});
</script>
</body>
</html>
监听子组件事件
在我们开发 <blog-post>
组件时,它的一些功能可能要求我们和父级组件进行沟通。例如我们可能会引入一个辅助功能来放大博文的字号,同时让页面的其它部分保持默认的字号。
在其父组件中,我们可以通过添加一个 postFontSize
数据属性来支持这个功能:
new Vue({
el: '#blog-posts-events-demo',
data: {
posts: [/* ... */],
postFontSize: 1
}
})
它可以在模板中用来控制所有博文的字号:
<div id="blog-posts-events-demo">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
</div>
</div>
现在我们在每篇博文正文之前添加一个按钮来放大字号:
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<button>
Enlarge text
</button>
<div v-html="post.content"></div>
</div>
`
})
问题是这个按钮不会做任何事:
<button>
Enlarge text
</button>
当点击这个按钮时,我们需要告诉父级组件放大所有博文的文本。幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件可以像处理 native DOM 事件一样通过 v-on
监听子组件实例的任意事件:
<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
同时子组件可以通过调用内建的 $emit
方法 并传入事件名称来触发一个事件:
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
有了这个 v-on:enlarge-text="postFontSize += 0.1"
监听器,父级组件就会接收该事件并更新 postFontSize
的值。
使用事件抛出一个值
有的时候用一个事件来抛出一个特定的值是非常有用的。例如我们可能想让 `组件决定它的文本要放大多少。这时可以使用
$emit` 的第二个参数来提供这个值:
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
然后当在父级组件监听这个事件的时候,我们可以通过 $event
访问到被抛出的这个值:
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>
或者,如果这个事件处理函数是一个方法:
<blog-post
...
v-on:enlarge-text="onEnlargeText"
></blog-post>
那么这个值将会作为第一个参数传入这个方法:
methods: {
onEnlargeText: function (enlargeAmount) {
this.postFontSize += enlargeAmount
}
}
在组件上使用 v-model
自定义事件也可以用于创建支持 v-model
的自定义输入组件。记住:
<input v-model="searchText">
等价于:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
当用在组件上时,v-model
则会这样:
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
为了让它正常工作,这个组件内的 `` 必须:
- 将其
value
特性绑定到一个名叫value
的 prop 上 - 在其
input
事件被触发时,将新的值通过自定义的input
事件抛出
写成代码之后是这样的:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
现在 v-model
就应该可以在这个组件上完美地工作起来了:
<custom-input v-model="searchText"></custom-input>
子往父传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- <App></App>-->
</div>
<script src="../vue.js"></script>
<script>
/* 如果仅仅是实例化vue对象中,既有el,又有template,如果template中定义模板中内容
那么template的优先级大于el */
Vue.component('VBtn', {
data: function () {
return {}
},
props: ['id'],
template: `
<button v-on:click="clickHandler">
{{ id }}
</button>
`,
methods: {
clickHandler:function () {
// 每个组件中的this指向当前组件对象
console.log(this);
this.id++;
// this.$emit('自定义事件','传值')
this.$emit('clickHandler',this.id)
}
}
});
// 1.声子(声明) Vue中组件的名字 首字母要大写 跟标签区分
let Vheader = {
data: function () {
return {}
},
// 只要声明父组件的属性,就可以使用
props: ['msg', 'post'],
created(){
console.log(this)
},
methods:{
clickHandler:function (val) {
alert(val);
this.$emit('fatherHandler',val)
}
},
// 定义模板内容
template: `
<div class="child">
<h1>我是Vheader</h1>
<h2>mhy</h2>
<h2>{{ msg }}</h2>
<h3>{{ post.title }}</h3>
<h3>{{ post.id }}</h3>
<VBtn v-bind:id="post.id" v-on:clickHandler="clickHandler"></VBtn>
</div>
`
};
let App = {
data: function () {
return {
text: "我是父组件的数据",
post: {
id: 2,
title: 'my ccc'
}
}
},
template: `
<div id="a">
我是父组件的:{{ post.id }}
<Vheader v-bind:msg="text" v-bind:post="post" v-on:fatherHandler="father_handler"></Vheader>
</div>
`,
created(){
console.log(this)
},
methods: {
father_handler:function (val) {
this.post.id = val;
}
},
components: {
Vheader,
}
};
// APP header asibe content
let vm = new Vue({
el: '#app',
data: function () {
return {
msg: 'alex'
}
},
created(){
console.log(this)
},
// 用子(使用)
template: `
<App />
`,
components: {
// 2.挂子(挂载)
// 如果key和value一样,可以只写一个
// App:App
App
}
});
</script>
</body>
</html>
平行组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="../vue.js"></script>
<script>
// A ---> B传值 B要声明事件 $on('事件的名字',function(val){}) A要触发事件 $emit('A组件声明的事件名','传入的值')
// 前提:这两个方法必须绑定在同一个实例化对象上(bus)
let bus = new Vue();
Vue.component('Test', {
data: function () {
return {
msg: '我是子组件的数据'
}
},
template: `
<button v-on:click="clickHandler" >传递</button>
`,
methods: {
clickHandler: function () {
bus.$emit('testData',this.msg)
}
}
});
Vue.component('Test2', {
data: function () {
return {
text:''
}
},
template: `
<h1>{{ text }}</h1>
`,
methods: {},
created() {
bus.$on('testData', (val) => {
this.text = val;
alert(val)
})
}
});
let Vheader = {
data: function () {
return {}
},
template: `
<div class="Vheader">
<Test />
<Test2 />
</div>
`
};
let App = {
data: function () {
return {}
},
template: `
<div class="app">
<Vheader></Vheader>
</div>
`,
components: {
Vheader
}
};
let vm = new Vue({
el: '#app',
data: function () {
return {}
}, components: {
App
}
});
</script>
</body>
</html>
以上是关于Vue 组件的主要内容,如果未能解决你的问题,请参考以下文章