2018-09-19
话不多说，步入正轨==》》》Ming Never Give upQAQ~
当我们说到组件(component)这个词语时:
①他是Vue.js最强大的功能之一。
②组件可以扩展HTML元素，封装可重用的代码。
这样，我们就获得了一个组件构造器，但现在还无法直接使用这个组件，需要将组件注册到应用中。Vue.js提供了两种注册方式，分别是全局注册和局部注册。
因此，我们现在先开始学习如何注册组件?
firstly,注册一个全局组件语法格式如下：
//tagName 为组件名，options 为配置选项。
Vue.component(tagName, options)
注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
secondly,全局注册==>
全局注册需要确保在根实例初始化之前注册，这样才能使组件在任意实例中被使用，注册方式如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件</title>
</head>
<body>
<div id="QAQ">
<custom></custom>
</div>
<script src="js/vue.js"></script>
<script>
// 注册
Vue.component('custom', {
template: '<h1>全局注册!</h1>'
})
// 创建根实例
new Vue({
el: '#QAQ'
})
</script>
</body>
</html>
效果图：
全局注册.png
QAQ:
组件名不要用HTML标签；
若标签有同级时，要有父级标签包括；
组件可写多个；
组件也可以嵌套；
所有实例都能用全局组件；
遵循规则:字母小写，且包含一个短横杠“-”；
字符串不允许自动换行。
thirdly,局部注册==>
局部注册则限定了组件只能在被注册的组件中使用，而无法在其他组件中使用，注册方法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部注册</title>
</head>
<body>
<div id="QAQ">
<locality></locality>
</div>
<script src="js/vue.js"></script>
<script>
var Child = {
template: '<h1>局部注册!</h1>'
}
// 创建根实例
new Vue({
el: '#QAQ'
, components: {
// <runoob> 将只在父模板可用
'locality': Child
}
})
</script>
</body>
</html>
效果图：
局部注册.png
Prop
①prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
②动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
QAQ
①这就是上面说的组件可以写多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<ul>
<li></li>
</ul>
</div>
<script src='js/vue.js'></script>
<script>
//全局：
Vue.component('my-component', {
template: `
<div>
<h1>这是一个组件</h1>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
效果图:
多个组件.png
QAQ
②点击弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<!-- <p>{{msg}}</p>-->
<my-component></my-component>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-component", {
template: `
<div>
<h1>{{msg}}</h1>
<button @click='alt'>按钮</button>
</div>
`
, data: function () {
return {
msg: 'JJ.Lin'
}
}
, methods: {
alt: function () {
alert(“行走的CD”)
}
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
点击弹框.png
QAQ
③实例三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-content></my-content>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-content", {
template: `
<div>
<h2>我是my-content组件的标题</h2>
<my-child v-bind:message='msg'></my-child>
</div>
`
, data: function () {
return {
msg: '霍哈哈哈哈啊哈哈哈'
}
}
})
Vue.component("my-child", {
props: ['message']
, template: `
<div>
<h3>我是my-child组件中的标题</h3>
<p>{{message}}</p>
</div>
`
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
效果图：
实例三.png
QAQ
④水果列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<my-father></my-father>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component("my-father",{
template:`
<div>
<my-son v-bind:tit='title'></my-son>
<my-list v-bind:fruit='arr'></my-list>
</div>
`,
data:function(){
return{
arr:['apple','pear','orange'],
title:'水果列表'
}
}
})
//title
Vue.component('my-son',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
//arr
Vue.component('my-list',{
props:['fruit'],
template:`
<ul>
<li v-for="value in fruit">{{value}}</li>
</ul>
`
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
组件水果列表.png
网友评论