vue笔记2——component组件

组件其实就是自定义的标签。

一、全局化注册组件

组件中第一个参数是组件名,第二个参数是一个对象,里面可以放模板等内容

二、局部注册组件

局部的就是在构造器里面定义,在构造器里面可以定义多个组件,所以components必须加s,仍是以对象的形式。但是里面内容必须以字符串的形式加双引号。

注意:自定义指令和自定义组件的区别

自定义指令定义的是标签指令,而自定义组件定义的是标签,且自定义组件可以在里面添加属性。

三、自定义组件的props属性设置

props选项就是设置和获取标签上的属性值,可以在自定义的组件里面添加自家想要的属性,然后通过props选项来获取。

<body>
   <div id="app">
	   <panda v-bind:here="message"></panda>
   </div>
</body>
<script>
	  var vm=new Vue({
		  el:"#app",
		  data:{
		  	message:‘China‘
		  },
		  components:{
		  	"panda":{
				  template:`<p style="color:red;">Panda from {{ here }}</p>`,
				  props:[‘here‘]
			  }
		  }
	  })
</script>

  以上代码获取属性值的同时还通过v-bind指令来向组件中传值。

原文地址:https://www.cnblogs.com/endlessmy/p/8337978.html

时间: 2024-10-10 10:19:43

vue笔记2——component组件的相关文章

vue笔记-路由,组件

git page: 任何仓库 master分支,都可以发布(git page) ------------------------------------- 双向过滤器: Vue.filter(name,{ read: write: }); ------------------------------------- 1.0 2.0 ------------------------------------- 引入 vue.js ------------------------------------

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

Vue基础篇--8组件基础 component

Vue基础篇--8组件基础 component 1.简单示例 <div id='components1'> <button-conter></button-conter> </div> <script> // 定义一个名为button-conter组件 Vue.component("button-conter",{ data:function () { return { count:0 } }, template:`<b

Vue.js——60分钟组件快速入门(上篇)

组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星!(所有示例都放在GitHub Pages上了,请访问https://github.com/keepfool/vue-tut

vue笔记三

十.组件 1.组件中的data为函数 2.props: 父组件向子组件传递数据 子组件:Child.vue <template> <span>{{ myMsg }}</span> </template> <script> export default { props: ['myMsg'], data () { return { } } } </script> 父组件: <template> <div id="

【Vue】浅谈Vue不同场景下组件间的数据交流

浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景.这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现 父子组件间的数据交流 父子组件间的数据交流可分为两种: 1.父组件传递数据给子组件 2.子组件传递数据给父组件 父组件传递数据给子组件——pro

转: Vue.js——60分钟组件快速入门(上篇)

转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树: 那么什么是组件呢?组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或