一.组件
- 组件都具有模板,template
- new Vue()创建的是根组件
- 组件与实例一一对应,创建一个实例就是创建了一个组件,同理创建一个组件就相当于创建了一个实例
- 根组件的挂载点一般就是根组件的模板,根组件也可以显式书写自己的模板,会替换掉挂载点
- 子组件都具有自身模板,根组件是所有子组件的父级(一级父级....n级父级)
二.局部组件
<div id="app">
<!-- 连接语法 -->
<local-tag></local-tag>
</div>
<script>
// 定义局部组件
var localTag = {
template: "<button @click='btnClick'>{{ num }}</button>",
data () {
return {
num: 0
}
},
methods: {
btnClick () {
this.num++;
}
}
}
// 根组件
new Vue({
el: "#app",
// 子组件要在父组件中使用,需要注册
components: {
// 小驼峰 "localTag": localTag
localTag
}
})
</script>
三.全局组件
<div id="app">
<global-tag></global-tag>
</div>
<script>
// 定义全局组件
Vue.component("global-tag",{
template: "<button @click='btn'>{{ n }}</button>",
data () {
return {
n: 0
}
},
methods: {
btn () {
this.n++
}
}
})
// 根组件
new Vue({
el: "#app",
})
</script>
四.数据传递~父传子
<div id="app">
<local-tag :num="num" :sup_data="sup_data"></local-tag>
</div>
<script type="text/javascript">
var localTag = {
props: ['num', 'sup_data'],
template: "<div @click='divActive'>{{ num }}</div>",
methods: {
divActive () {
console.log(this.num);
console.log(this.sup_data);
}
}
}
new Vue({
el: "#app",
components: {
localTag
},
data: {
num: 10,
sup_data: [1, 2, 3, 4, 5]
}
})
</script>
// 1.数据由父级提供
// 2.在父级模板(挂载点)中出现的子组件名(local-tag)上,为其设置全局属性,属性值就是父级提供的数据变量
// 3.在子组件中,提供$props来拿到自身的全局属性名(用''括起来的数组)
// 4.在模板中直接用属性名来访问数据,在方法中通过this.属性名来访问数据
// 5.名字出现多个单词的时候,使用_连接语法进行处理,以达到命名的统一
五.数据传递~子传父
<div id="app">
<global-tag @send_data="receive_data"></global-tag>
{{ n }}
</div>
<script type="text/javascript">
Vue.component("global-tag", {
template: "<div @click='divAction'>我是div</div>",
data () {
return {
num: 10,
arrList: [1, 2, 3, 4, 5]
}
},
methods: {
divAction () {
this.$emit("send_data", this.num, this.arrList)
}
}
});
new Vue({
el: "#app",
data: {
n: 0
},
methods: {
receive_data (num, arrList) {
console.log("接收到的数据:", num, arrList);
this.n = num;
}
}
})
</script>
// 1.数据由子级提供
// 2.在子级中通过某个事件对外(this.$emit("事件名", ...args))发送一个事件
// 3.在父级的模板中,子组件名上,为发送的事件绑定一个回调方法,该回调方法由父级来完成实现体
// 4.在实现体中就可以拿到回调参数
根组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>根组件</title>
</head>
<body>
<p>app之上</p>
<div id="app">
<h1>{{ msg }}</h1>
</div>
<p>app之下</p>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
// 每个组件组件均拥有模板,template
var app = new Vue({
// 根组件的模板就是挂载点
el: "#app",
data : {
msg: "根组件"
},
// 根组件可以显式书写模板吗? 可以
// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
// 根组件如果不书写自身模板,那么模板就采用挂载点,如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
template: "<div>显式模板</div>"
})
// app.$template
</script>
</html>
局部组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
<style type="text/css">
.sup {
width: 100px;
height: 100px;
background-color: orange;
}
.sub {
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%
}
</style>
</head>
<body>
<div id="app">
<!-- 错误: html不区分大小写 -->
<!-- <localTag></localTag> -->
<!-- html中组件命名提倡-的链接语法 -->
<!-- <local-tag></local-tag> -->
<!-- 1 -->
<!-- <localtag></localtag>
<localtag></localtag>
<localtag></localtag> -->
<!-- 2 3 4 5 -->
<local-tag></local-tag>
<btn-tag></btn-tag>
<btn-tag></btn-tag>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 如何定义一个局部组件
// 局部组件的语法规则
// 如何使用局部组件
// 为什么要使用局部组件(达到html+css+js代码块的复用)
// 一个满足vue语法规则的对象就是一个组件
// 直接来定义这样的组件,用一个变量名来接收,就是创建了一个局部组件,
// 变量名就是局部组件的组件名
// 通过组件名就可以使用该组件
// 局部组件要在父组件中使用,一定要提前在父组件中进行注册
// 语法规则
// 有自身模板template,有data/methods/computed/watch...
var localTag = {
template: "<div class='sup'><div class='sub'></div></div>"
}
var btnTag = {
// template: "<div><button>按钮1</button><button>按钮2</button></div>"
template: "<button @click='btnAction'>点击了{{ num }}下</button>",
// data需要绑定方法,数据通过方法返回值进行处理,达到组件复用时,数据的私有化
data: function() {
return {
num: 0
}
},
methods: {
btnAction: function () {
this.num++
}
}
}
// 根组件
new Vue({
el: "#app",
// 注册子组件
components: {
// 1
// "localtag": localTag
// 2
// "localTag": localTag
// 3
// "local-tag": localTag
// 4
// localTag: localTag
// 5 ES6对象语法,key value写法相同,可以省略value
localTag,
btnTag,
}
})
</script>
</html>
全局组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<global-tag v-for="(o, i) in ls" :key="i"></global-tag>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 全局组件
// 用Vue.component("组件名", {})来创建全局组件
// 全局组件附属于Vue实例,可以不需要注册就可以使用
Vue.component("global-tag", {
template: "<button @click='btnClick'>{{ n }}</button>",
data () {
return {
n: 0
}
},
methods: {
btnClick () {
this.n++
}
}
})
new Vue({
el: "#app",
data: {
ls: [0, 0, 0]
}
})
</script>
</html>
父组件传递信息给子组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>父传子</title>
</head>
<body>
<div id="app">
<local-tag :num="num" :sup_data="sup_data"></local-tag>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 父组件与子组件建立联系的关键点
// 同绑定属性的方式进行数据传输
// 1.给在父组件中出现的子组件名定义标签的全局属性
// 2.全局属性的值赋值为父组件的数据变量
// 3.在子组件内部,通过props拿到标签中的全局属性名
var localTag = {
props: ['num', 'sup_data'],
template: "<div @click='divActive'>{{ num }}</div>",
methods: {
divActive () {
console.log(this.num);
console.log(this.sup_data);
}
}
}
// 数据属于父组件,子组件来接收使用数据
new Vue({
el: "#app",
components: {
localTag
},
data: {
num: 10,
sup_data: [1, 2, 3, 4, 5]
}
})
</script>
</html>
子组件传递信息给父组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<global-tag @send_data="receive_data"></global-tag>
{{ n }}
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 子传父:
// 通过发生事件的方式进行数据传输
// 数据由子组件提供, 父组件通过事件的回调方法获取数据
// 发生数据的关键: $emit("事件名", ...args)
Vue.component("global-tag", {
template: "<div @click='divAction'>我是div</div>",
data () {
return {
num: 10,
arrList: [1, 2, 3, 4, 5]
}
},
methods: {
divAction () {
// 发生事件
// console.log("要发生事件,携带参数了");
this.$emit("send_data", this.num, this.arrList)
}
}
});
new Vue({
el: "#app",
data: {
n: 0
},
methods: {
receive_data (num, arrList) {
console.log("接收到的数据:", num, arrList);
this.n = num;
}
}
})
</script>
</html>
网友评论