vue的组件 components

一、组件组成

组成：html +Js+css

模板:

<template><div >  </div>
</template>
<script>
export default {data(){}}
</script>
<style></style>

二、注册组件

1、注册全局组件

//先引入组件
import  组件名 from '绝对路径'
//全局注册组件
Vue.component("组件名"，{template：html ,data(){},methods:{}}//在根组件中调用即可

2、注册局部组件

//先引入组件
import  组件名  from  '绝对路径'//注册局部组件  直接在js中注册export default{components:{组件名}|data(){},}//在根组件中调用即可

三、父子组件之间的传值

1、父组件想子组件传值

在子组件中使用props 方法接收父组件的数值

export default {props:["mytitle"],data(){return{}},
//在子组件就可以直接使用了

2、子组件想父组件传值

子组件发射自定义事件 this.$emit("自定义事件类型"，参数1，参数2) 父组件进行接收

 methods:{buquan(){this.$emit("shz",{name:'三国',author:'吴承恩',info:'四个男人西天取经的故事'})}

父组件接收

<template><div id="app" >Head  @shz="allBook" :mytitle="name"/> </div>
</template>

vue的组件 components相关推荐

vue的组件components基础和安装vue脚手架
组件组件在vue是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装作用:可复用的vue实例组件注册局部注册组件 new Vue({ el: comp ...
第三天：Vue的组件化
1.认识组件化我们将一个完整的页面分成很多个组件,每个组件都用于实现页面的一个功能块,而每一个组件又可以进行细分. 组件化是Vuejs中的重要思想,它提供了一种抽象,让我们可以开发出一个个独立可复用 ...
VUE的组件DEMO
组件的基本写法可以如下: HTML: <div id="components-demo"><button-counter self-data="this ...
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715 子组件child.vue <template> ...
Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...
vue中子组件和子组件之间怎么通信_vue.js组件之间如何通信？
vue.js组件之间如何通信?下面本篇文章就来给大家介绍一下Vue.js组件间通信方式.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 平时在使用Vue框架的业务开发中,组件不仅仅要 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
Vue创建组件的三种方式
1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"><!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入到 ...

vue的组件 components

一、组件组成

二、注册组件

vue的组件 components相关推荐

最新文章

热门文章