十、组件化开发

全局注册组件

所谓的全局注册,就是注册后可以在随意的地方进行使用


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <hello-word>hello-word>
  div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  <script>
  	// 定义组件配置项
  	const HelloWord = {
	  template: '
hello word
'
} // 全局组册组件 // 第一个参数是注册名(也就是即将使用的组件的标签名) // 第二个参数就是组件的配置项 // 组件命名规范:组件一般采取大驼峰的命名方式(小写字母加中线连接也可以,但是推荐大驼峰) // 组件的使用注意点:不管命名采用的是大驼峰(还是小写字母加中划线),在使用事都必须使用小写字母加中划线的方式。 // 具体原因是html是区分大小写的,如果使用大驼峰的话可能导致不报错但是不显示 Vue.component('HelloWord', HelloWord) new Vue({ el: '#app' })
script> body> html>

局部注册组件

所谓的局部注册组件就是在那个组件里组册的,那么只能在该组件下使用


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <hello-word>hello-word>
  div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  
  <script>
  	// 定义组件配置项
  	const HelloWord = {
	  template: '
hello word
'
} new Vue({ el: '#app', components: { // 局部注册组件 HelloWord } })
script> body> html>

嵌套组件

嵌套组件就是对局部注册组件的最好应用
下面的HelloChina组件就是HelloWord组件的局部组件,也就是子组件


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <hello-word>hello-word>
  div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  
  <script>
  	// 定义组件配置项
  	const HelloChina = {
	  template: '
hello china
'
} const HelloWord = { // 注意⚠️:一个组件的template必须是有唯一的根元素 template: '
hello word
'
, components: { HeeloChina } } new Vue({ el: '#app', components: { HelloWord } })
script> body> html>

组件的template写法

嵌套组件里面也发现了将template写成字符串很不方便,所以就会有下面的两种方式:模版字符串和template标签

模版字符串
// 组件配置项
const HelloWord = {
  template: `
    
hello word hello china
`
}
template标签

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <hello-word>hello-word>
  div>
  
  
  <template id="hello">
    <div>
      <div>hello worddiv>
      <div>hello chinadiv>
    div>
  template>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  
  <script>
  	// 定义组件配置项
  	const HelloChina = {
	  template: '#hello'
	}
	
	new Vue({
	  el: '#app',
	  components: {
	    HelloWord
	  }
	})
  script>
body>
html>

动态组件


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
head>
<body>
  <div id="app">
    <ul>
		<li @click="guoNeiClick">国内新闻li>
		<li @click="guoWaiClick">国外新闻li>
	ul>
	<component :is="changeComponent">component>
  div> 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
  const GuoNei = {
	template: '
国内新闻
'
} const GuoWai = { template: '
国外新闻
'
} new Vue({ el: '#app', component: { GuoNei, GuoWai }, data: { changeComponent: 'guo-nei' }, methods: { guoNeiClick() { this.changeComponent = 'guo-nei' }, guoWaiClick() { this.changeComponent = 'guo-wai' } } })
script> body> html>

总结

  1. 组件的注册分为:全局注册(Vue.component)、局部注册(components)
  2. 组件的data需要写成一个方法return对象,是为了组件的复用
  3. 组件是可以嵌套的,需要注意的是每个组件的template根元素必须是唯一的

你可能感兴趣的:(十、组件化开发)