Javascript - Vue - 组件
创建组件
组件是可以重复使用的html容器,可以把它注册到全局的Vue或实例的vue对象上,使它成为全局组件或vue对象的子组件,然后可以将它的html标签插入html文档中。组件的html只能有一个root元素。
使用声明式的方法创建组件
var tt=Vue.extend({
template:"<div>hello vue</div>"
});
Vue.component("tt", tt); //参数1是组件的html标签名,参数2是组件对象名
//方式二
var tt = {
template: "<div>hello vue</div>"
};
Vue.component("tt", tt);
//方式三
var vv = new Vue({
el: ".box",
components: {
tt: {
template: "<div>hello vue</div>"
}
}
});
template指向的html还可以直接写在template标签里,然后通过id或class引入
<div>hello vue</div>
</template>
template:"#template-box"
});
var tt = {
template: "#template-box"
};
var vv = new Vue({
el: ".box",
components: {
tt: {
template: "#template-box"
}
}
});
使用vue文件创建组件
创建一个components目录,在目录下创建一个html,把后缀名改为.vue,清空该文档,然后把template写进去。这种文件就是vue专用的组件文件,在template标签下可以写任何html标签,支持html、script、style标签。
<div>
<h1>{{msg}}</h1>
</div>
</template>
<script>
//此处可以使用ES6语法导入js、css文件
//表示导出这个组件对象
export default {
//组件对象可以看成是一个特殊的vue对象,用法与在vue对象差不多,只是data必须是一个函数,它必须返回一个匿名的对象,而真正的data就放在匿名对象中
data: function () {
return {
msg:"hello vue"
}
}
}
</script>
<style></style>
然后导入这个组件对象,把它注册在vue对象上
import tt from "./components/tt.vue";
var vm = new Vue({
el: ".box",
components: {
tt: tt
}
});
现在可以在vue对象绑定的那个html中使用组件了
<tt></tt>
</div>
*组件的html名字如果是驼峰形式,那么插入html时,必须使用连字符:
template:"<div>hello vue</div>"
}
Vue.component("myCom",tt);
子父组件传值
子组件取父组件的数据、调用父组件的函数 $parent
el: ".box",
data: {
msg:"test"
},
methods: {
getParentFunction: function () {
alert("OK");
}
},
components: {
tt: tt
}
});
<div>
<button @click="getParentData">getParentData</button>
</div>
</template>
<script>
export default {
data: function () {
return {
msg:"hello vue"
}
},
methods: {
getParentData: function () {
alert(this.$parent.msg);
this.$parent.getParentFunction();
}
}
}
</script>
父组件取子组件的数据 $refs
使用vue的$refs对象可以获取为子组件定义的ref引用,通过这种方式获取子组件对象,然后得到子组件的数据或函数。ref只能用在子组件上,对父组件无效。
<div></div>
</template>
<script>
export default {
data: function () {
return {
msg: "hello vue"
}
},
methods: {
getChildFunction: function () {
alert("OK");
}
}
}
</script>
<tt ref="mytt"></tt>
</div>
el: ".box",
methods: {
getChildData: function () {
alert(this.$refs.mytt.msg);
this.$refs.mytt.getChildFunction();
}
},
components: {
tt: tt
}
});
切换子组件
除了html标签:template,vue还提供了component标签,这个html标签用于装载组件,它的html属性:is用于指定装载的组件的名字(组件对象的名字),利用is属性可以实现在html标签component中动态切换组件。
<a href="#" @click="login">login</a>
<a href="#" @click="register">register</a>
<component :is="componentName"></component>
</div>
<script>
Vue.component("login", {
template: "<h3>login区域</h3>"
});
Vue.component("register", {
template: "<h3>register区域</h3>",
});
var vm = new Vue({
el: "#box",
data: {
componentName:null
},
methods: {
login: function () {
this.componentName = "login";
},
register: function () {
this.componentName = "register";
}
}
});
渲染组件
vue提供render来将组件对象渲染到html文档,这样做会使组件直接替换掉绑定到vue上的那个html元素。
template: "<h1>hello world</h1>"
};
var vm = new Vue({
el: "#box",
render: function (create) {
return create(tem);
}
});
组件的生命周期
与vue对象的生命周期是一样的。
在vue组件文件中获取外部文件中的dom元素
通常情况下,一个页面会有N个组件,如果你使用.vue文件创建组件,那么在组件文件中如何访问在同一个页面上的其它组件里的html元素呢?答案是只要这些组件在同一个页面上,那就可以直接使用js原生方法document.querySelector获取其它组件里的html元素。
最新文章
- .NET同步与异步之相关背景知识(六)
- Oracle Flashback 闪回
- WPF打包32位和64位程序 运行在ghost WIN7上问题
- xamarin SQLite路径
- 298.	Binary Tree Longest Consecutive Sequence
- Linux内核完全注释之编程语言和环境(二)
- Android ViewPager 应该及技巧
- [转]iOS设备唯一标识探讨
- mysql解压版的配置安装
- SUSE Linux 下redis 的坑
- 剑指Offer第36题—Java版
- WPF自学入门(一)WPF-XAML基本知识
- 使用JFlex生成词法分析器 1:安装配置
- JS的函数节流(throttle)
- 记OI退役
- WCF- 契约Contract(ServiceContract、OperationContract、DataContract、ServiceKnownType和DataMember)(转)
- Web标准:八、下拉及多级弹出菜单
- UE 技巧
- 安装scrapy 出错 building &#39;twisted.test.raiser&#39; extension error: Microsoft Visual C++ 14.0 is required.
- MyBatis 学习记录1 一个简单的demo
热门文章
- 1.在配置XML文件时出现reference file contains errors (http://www.springframework.org/schema/beans/...解决方案
- python -- 程序异常与调试(异常处理)
- python的代码块和if条件表达式
- Leetcode春季打卡活动 第二题:206. 反转链表
- Linux bash命令行常用快捷键(Xshell和secure CRT以及gnome-terminal)
- 注解@ConfigurationProperties使用方法(二十)
- 本地图片转base64编码
- Drupal <; 7.32 “Drupalgeddon” SQL注入漏洞(CVE-2014-3704)
- anyRTC iOS端屏幕录制开发指南
- Centos忘记密码怎么修改