VueJS 自定义组件
注册组件
全局注册
可用于在任何模板中,使用之前要先注册
语法:Vue.component(name, options)
局部注册
组件间通信
- 父组件 -> 子组件: props
- 子组件 -> 父组件: on &emit
组件中的 data 必须是函数
每个组件都是相互独立的,如果他们公用一个对象,在更改一个组件数据的时候,会影响其他组件。
如果是函数的话,每个组件都有自己独立的数据,相互之间不会影响。
is 扩展原生 html
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="app">
<h2>自定义组件:下拉框{{msg}}</h2>
<!--自定义组件标签-->
<custom-select></custom-select>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
<script>
// 全局注册组件
Vue.component("custom-select",{
template: `<section class="wrap">
<div class="searchIpt clearfix">
<div class="clearfix">
<input type="text" name="keyWord" value="" />
<input type="button" value="GO">
</div>
<ul class="list">
<li>html</li>
<li>angular</li>
<li>react</li>
<li>node</li>
<li>js</li>
<li>css</li>
</ul>
</div>
</section>`
})
// 实例化 vm
new Vue({
el: "#app",
data: {
msg: "dhfajk"
},
methods: {
}
})
</script>
</html>