首页前端开发JavaScriptvue 组件基础知识总结

vue 组件基础知识总结

时间2024-01-31 17:37:02发布访客分类JavaScript浏览1043
导读：收集整理的这篇文章主要介绍了vue 组件基础知识总结，觉得挺不错的，现在分享给大家，也给大家做个参考。 组件基础1 组件的复用组件是可复用的vue实例。<!DOCTYPE htML...
收集整理的这篇文章主要介绍了vue 组件基础知识总结，觉得挺不错的，现在分享给大家，也给大家做个参考。

组件基础

1 组件的复用

组件是可复用的vue实例。

!DOCTYPE htML>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.statiCFile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			button-counter>
    /button-counter>
    			button-counter>
    /button-counter>
    			button-counter>
    /button-counter>
    		/div>
      script>
			// 定义一个名为 button-counter 的新组件			Vue.component('button-counter', {
				data: function () {
					return {
						count: 0					}
				}
    ,				template: 'button v-on:click="count++">
点击了 {
{
 count }
}
     次./button>
'			}
    );
			new Vue({
 el: '#app' }
    );
      /script>
     /body>
    /html>

注意当点击按钮时，每个组件都会各自独立维护它的count。这里自定义组件的data属性必须是一个函数，每个实例维护一份被返回对象的独立的拷贝。

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			button-counter>
    /button-counter>
    			button-counter>
    /button-counter>
    			button-counter>
    /button-counter>
    		/div>
      script>
			VAR buttonCounterData = {
				count: 0			}
			// 定义一个名为 button-counter 的新组件			Vue.COMponent('button-counter', {
				data: function () {
					return buttonCounterData				}
    ,				template: 'button v-on:click="count++">
点击了 {
{
 count }
}
     次./button>
'			}
    );
			new Vue({
 el: '#app' }
    );
      /script>
     /body>
    /html>

2 通过 PRop 向子组件传递数据

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			blog-post tITle="My journey with Vue">
    /bLOG-post>
    			blog-post title="Blogging with Vue">
    /blog-post>
    			blog-post title="Why Vue is so fun">
    /blog-post>
    		/div>
      script>
			Vue.component('blog-post', {
    				props: ['title'],				template: 'h3>
{
{
 title }
}
    /h3>
'			}
)			new Vue({
 el: '#app' }
    );
      /script>
     /body>
    /html>

这里blog-post> 组件就是通过自定义属性title来传递数据。
我们可以使用v-bind来动态传递prop。

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title">
    /blog-post>
    		/div>
      script>
			Vue.component('blog-post', {
    				props: ['title'],				template: 'h3>
{
{
 title }
}
    /h3>
'			}
)			new Vue({
				el: '#app',				data: {
					posts: [						{
 id: 1, title: 'My journey with Vue' }
,						{
 id: 2, title: 'Blogging with Vue' }
,						{
 id: 3, title: 'Why Vue is so fun' }
					]				}
			}
    );
      /script>
     /body>
    /html>

3 单个根元素

每个组件必须只有一个根元素。

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post">
    /blog-post>
    		/div>
      script>
			Vue.component('blog-post', {
    				props: ['post'],				template: `					div class="blog-post">
    						h3>
{
{
 post.title }
}
    /h3>
    						div v-html="post.content">
    /div>
    					/div>
				`			}
)			new Vue({
				el: '#app',				data: {
					posts: [						{
 id: 1, title: 'My journey with Vue', content: 'my journey...' }
,						{
 id: 2, title: 'Blogging with Vue', content: 'my blog...' }
,						{
 id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]				}
			}
    );
      /script>
     /body>
    /html>

注意到v-bind:post="post"绑定的post是一个对象，这样可以避免了需要通过很多prop传递数据的麻烦。

4 监听子组件事件

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
			div :style="{
fontSize: postFontSize + 'em'}
    ">
    				blog-post v-for="post in posts" 					v-bind:key="post.id" 					v-bind:post="post"					v-on:enlarge-text="postFontSize += 0.1" />
    			/div>
    					/div>
      script>
			Vue.component('blog-post', {
    				props: ['post'],				template: `					div class="blog-post">
    						h3>
{
{
 post.title }
}
    /h3>
    						button v-on:click="$emit('enlarge-text')">
    放大字体/button>
    						div v-html="post.content">
    /div>
    					/div>
				`			}
)			new Vue({
				el: '#app',				data: {
					postFontSize: 1,					posts: [						{
 id: 1, title: 'My journey with Vue', content: 'my journey...' }
,						{
 id: 2, title: 'Blogging with Vue', content: 'my blog...' }
,						{
 id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]				}
			}
    );
      /script>
     /body>
    /html>

子组件通过$emit方法并传入事件名称来触发一个事件。父组件可以接收该事件。

我们可以使用事件抛出一个值。

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
			div :style="{
fontSize: postFontSize + 'em'}
    ">
    				blog-post v-for="post in posts" 					v-bind:key="post.id" 					v-bind:post="post"					v-on:enlarge-text="postFontSize += $event" />
    			/div>
    					/div>
      script>
			Vue.component('blog-post', {
    				props: ['post'],				template: `					div class="blog-post">
    						h3>
{
{
 post.title }
}
    /h3>
    						button v-on:click="$emit('enlarge-text', 0.2)">
    放大字体/button>
    						div v-html="post.content">
    /div>
    					/div>
				`			}
)			new Vue({
				el: '#app',				data: {
					postFontSize: 1,					posts: [						{
 id: 1, title: 'My journey with Vue', content: 'my journey...' }
,						{
 id: 2, title: 'Blogging with Vue', content: 'my blog...' }
,						{
 id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]				}
			}
    );
      /script>
     /body>
    /html>

在父组件中，我们可以通过$event访问到被抛出的这个值。
我们可以在组件上使用v-model。

!DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			!-- input v-model="seArchText">
     -->
    			input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
    			p>
{
{
 searchText }
}
    /p>
    		/div>
      script>
			new Vue({
				el: '#app',				data: {
					searchText: ''				}
			}
    );
      /script>
     /body>
    /html>
    !DOCTYPE html>
    html>
     head>
      meta charset="utf-8">
        style>
         /style>
      script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js">
    /script>
     /head>
     body>
    		div id="app">
    			custom-input v-model="searchText">
    /custom-input>
    			custom-input v-bind:value="searchText" v-on:input="searchText = $event">
    /custom-input>
    			p>
{
{
 searchText }
}
    /p>
    		/div>
      script>
			Vue.component('custom-input', {
    				props: ['value'],				template: `input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >
`			}
)			new Vue({
				el: '#app',				data: {
					searchText: ''				}
			}
    );
      /script>
     /body>
    /html>

最后，注意解析 DOM 模板时的注意事项。

以上就是vue 组件基础知识总结的详细内容，更多关于vue 组件的资料请关注其它相关文章！

您可能感兴趣的文章:
  • 一篇文章带你搞懂VUE基础知识
  • 浅谈VUE uni-app 核心知识
  • 浅谈Vue入门需掌握的知识
  • vue组件入门知识全梳理
  • Vue的基本知识你都了解吗

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

vue组件

若转载请注明出处： vue 组件基础知识总结
本文地址： https://pptw.com/jishu/594269.html
vue3 watch和watchEffect的使用以及有哪些区别 C程序的注释只能是一行吗？

游客 回复需填写必要信息
↑