vue组件学习教程

来源：动视网责编：小采时间：2020-11-27 22:30:34

vue组件学习教程

vue组件学习教程:在学习vue时，组件学习比较吃力，尤其是组件间的通信，所以总结一下，官方文档的组件部分。注册组件全局组件语法如下，组件模板需要使用一个根标签包裹起来。data必须是一个方法 Vue.component('component-name',{ template:'<

推荐度：

点击下载本文 文档为doc格式

导读vue组件学习教程:在学习vue时，组件学习比较吃力，尤其是组件间的通信，所以总结一下，官方文档的组件部分。注册组件全局组件语法如下，组件模板需要使用一个根标签包裹起来。data必须是一个方法 Vue.component('component-name',{ template:'<

在学习vue时，组件学习比较吃力，尤其是组件间的通信，所以总结一下，官方文档的组件部分。

注册组件

全局组件

语法如下，组件模板需要使用一个根标签包裹起来。data必须是一个方法

Vue.component('component-name',{
 template:'<div><h1>标题</h1><span>作者信息</span></div>',
 data(){
 return{
 message:'组件的属性'
 }
 },
 methods:{

 }
})

局部组件

var com = {
 template:'<div><h1>标题</h1><span>作者信息</span></div>',
 data(){
 return{
 message:'组件的属性'
 }
 },
 methods:{

 }
}

new Vue({
 components:{
 'compontent-name':com
 }
})

组件通信

prop将父组件数据传给子组件

 <div id='app'>
 <child :msg=message></child>
 </div>

<script>
 Vue.component('child', {
 props: ['msg'],
 template: '<p>{{msg}}</p>'
 })

 new Vue({
 el: '#app',
 data: {
 message: '父组件数据'
 }
 })
</script>

利用子组件的props选项，父组件可以向子组件传递数据，但是子组件不能求改父组件的数据。

非父子组件通信

需要使用一个空的Vue实例来管理

<div id='app'>
 <com-a></com-a>
 <com-b></com-b>
</div>

var bus = new Vue();

var coma = {
 template: '<p @click="send">{{adata}}</p>',
 data(){
 return {
 adata: 'a的数据'
 }
 },
 methods:{
 send(){
 // 触发这一事件
 bus.$emit('data-to-b', this.adata);
 }
 }
 
};

var comb= {
 template: '<p>{{bdata}}</p>',
 data(){
 return {
 bdata: 'b的数据'
 }
 },
 mounted(){
 // 监听事件，获取a组件的数据，进行相关操作
 bus.$on('data-to-b', function (msg) {
 this.bdata = msg;
 }.bind(this));
 }
};

new Vue({
 el:'#app',
 components: {
 'com-a': coma,
 'com-b': comb
 }
})

vue组件学习教程

推荐度：

点击下载本文 文档为doc格式

标签：学习 VUE 教程

热门焦点

vue组件学习教程

vue组件学习教程

vue组件学习教程

最新推荐

猜你喜欢

热门推荐