Vue组件
qgyh 2020-11-04 11:42:03 2020-11-04 157 0
子组件的定义和注册
我们在本文的第一段中,通过Vue.component
形式定义的是全局组件。这一段中,我们来讲一下子组件。
在父组件中定义子组件
比如说,一个账号
模块是父组件,里面分为登陆
模块和注册
模块,这两个晓得模块就可以定义为子组件。
需要注意的是作用域的问题:我们在父组件中定义的子组件,只能在当前父组件的模板中使用;在其他的组件,甚至根组件中,都无法使用。
<!DOCTYPE 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>Document</title> <script src="vue2.5.16.js"></script></head><body> <div id="app"> <account> </account> </div> <script> //定义、注册组件 Vue.component('account', { template: '<div><h2>账号模块</h2> <login></login></div>', components: { 'login': { template: '<h3>登录模块</h3>' } } }); new Vue({ el: '#app' }); </script></body></html>
我们发现,既然是定义父亲<account>
的子组件,那么,子组件<login>
的调用,只能写在父组件<account>
的template
模板中。
显示效果:
在 Vue 根实例中定义子组件
当然,我们还可以这样做:把整个 Vue 对象当成父亲,这样的话,就可以在 Vue 示例中定义一个子组件。如下:
<!DOCTYPE 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>Document</title> <script src="vue2.5.16.js"></script></head><body> <div id="app"> <login> </login> </div> <script> new Vue({ el: '#app', //在Vue实例中定义子组件 components: { // components 是关键字,不能改 'login': { template: '<h3>登录模块</h3>' } } }); </script></body></html>
这样写的话,我们定义的子组件<login>
在整个#app
区域,都是可以使用的。
上面的代码,还有另外一种写法:(把子组件的模板定义,存放到变量中)【重要】
<!DOCTYPE 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>Document</title> <script src="vue2.5.16.js"></script></head><body> <div id="app"> <login> </login> </div> <script> //通过变量接收定义的子组件 var myLogin = { template: '<h3>登录模块</h3>' // template 是关键字,不能改 } new Vue({ el: '#app', //在Vue实例中定义子组件 components: { // components 是关键字,不能改 'login': myLogin } }); </script></body></html>
注意,在定义子组件时,关键字components
不要写错了。
组件之间的动态切换(暂略)
我们可以利用<component>
标签的:is
参数来进行组件之间的切换。
父组件向子组件传递数据
我们要记住:父组件通过属性的形式,向子组件传递数据。
引入:
我们先来看这样一段代码:
```html