1.局部组件
1.1 代码
<!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>局部组件</title>
</head>
<body>
<div id="app">
<!-- 父组件向子组件传值 -->
<!-- 1.父组件传递数据过来 -->
<!-- <itembox my_title="微信小程序"></itembox>
<itembox my_title="vue开发"></itembox>
<itembox my_title="java开发"></itembox> -->
<!-- 灵活传值 -->
<!-- 第一种写法 循环数组 -->
<itembox :my_title="item" v-for="item in arrs"></itembox>
<!-- 第二种写法 循环对象 -->
<itembox :title="item.title" :des="item.des" v-for="item in arrObj"></itembox>
<hr>
<h2>{{title}}</h2>
</div>
<hr>
<div id="app2">
<!-- 对于局部组件来说，就没有用了 -->
<itembox></itembox>
</div>
<script src="./js/vue.js"></script>
<script>
var itembox = {
//3.将数据放到模板中
template:`
<div style="background:#efefef;margin:10px">
<h1 @click="clickH1">Web前端开发</h1>
<!--<p>{{my_title}}</p>-->
<p>{{des}}</p>
</div>
`,
//注意:子组件中和父组件不一致，它是一个方法
data() {
return {
// des: "Java"
}
},
methods: {
clickH1(){
console.log("123")
}
},
//2.接收我们传递过来的数据
props:["my_title","title","des"]
}
var vm=new Vue({
el:'#app',
data:{
title: "Vue开发",
arrs: ["java","js","html5+css3","微信小程序开发","NodeJs"],
arrObj: [
{
title: "标题1",
des: "描述1"
},
{
title: "标题2",
des: "描述2"
}
]
},
methods:{
},
//创建一个局部组件(可以添加多个组件)
components: {
//将下面进行抽离(如果属性和值一样的情况下，可以直接写一个属性)
// itembox: itembox
itembox
// {
// template:`
// <div>
// <h1>Web前端开发</h1>
// <p>Vue开发</p>
// </div>
// `
// }
}
});
</script>
</body>
</html>1.2 显示效果
