您的位置：首页 > 产品设计 > UI/UE

IMWeb训练营-VUE-CustomSelectComponent

2017-04-22 10:47 363 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航