Vue组件的基础使用

最新推荐文章于 2022-09-21 16:32:27 发布

友人C君~

最新推荐文章于 2022-09-21 16:32:27 发布

阅读量145

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/CWH0908/article/details/91040345

版权

vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

外部导入Vue文件里的组件

以App.vue文件为入口，修改如下

<template>
  <div id="app">
    <img src="./assets/logo.png">

    <firstcomponent></firstcomponent><!--使用新导入的标签-->

  </div>
</template>

<script>

import firstcomponent from './components/Vue_Test.vue' //导入组件模块

export default {
	name: 'App',
	data () {
	    return {
	      msg: 'Hello Vue!'
	    }
	},

components: { firstcomponent }  //注册

}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

import语句导入了位于components文件下的Vue_Test.vue文件

在Vue_Test.vue文件中编写组件的内容，template放HTML代码，script放js代码，style放样式

<template>
  <div id="firstcomponent">
    <h1>自定义的模块</h1>
    <a> 作者： {{ author }} </a>
  </div>
</template>
 
<script type="text/javascript">
export default {
  data () {
    return {
      author: "CWH"
    }
  }
}
</script>
 
<style>
	
</style>

内部使用创建的组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue框架学习_组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<ol>
		    <todo-item></todo-item>
		</ol>
						
		<script>
            // 定义名为 todo-item 的新组件
            Vue.component('todo-item', {
              template: '<li>这是个待办项</li>'
            })
		</script>
	</body>
</html>

但是这样会为每个待办项渲染同样的文本，有时候满足不了需求。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个prop。

prop特性使得组件内容动态修改

组件可通过prop特性动态绑定、修改内容，使得组件在不改变结构的情况下，有更多不同的内容和效果。

以下是官网的示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue框架学习_组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  <ol>
		  <!-- 现在我们为每个 todo-item 提供 todo 对象
      	todo 对象是变量，即其内容可以是动态的。
      	我们也需要为每个组件提供一个“key”，稍后再作详细解释。-->
		    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
		  </ol>
		</div>
						
		<script>
			Vue.component('todo-item', {
			  // todo-item 组件现在接受一个"prop"，类似于一个自定义特性。这个 prop 名为 todo。
			  props: ['todo'],//自定义的一个特性
			  template: '<li>{{ todo.text }}</li>'//组件内容
			})
			
			var app = new Vue({
			  el: '#app',
			  data: {
			    groceryList: [
			      { id: 0, text: '蔬菜' },
			      { id: 1, text: '奶酪' },
			      { id: 2, text: '随便其它什么人吃的东西' }
			    ]
			  }
			});
		</script>
	</body>
</html>

友人C君~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的基础使用

外部导入Vue文件里的组件以App.vue文件为入口，修改如下<template> <div id="app"> <img src="./assets/logo.png"> <firstcomponent></firstcomponent> </d...
复制链接

扫一扫

专栏目录