精华内容
下载资源
问答
  • 比如直接{{}}6.2 组件数据存放6.3 Vue组件中的data为什么是函数? 前言 本博客的内容很多都来自官网,现在只是把自己的一些理解写出来给大家一起讨论学习 Vue官网 系列文章目录,Vue学习目录,每一章都代码...


    前言

    本博客的内容很多都来自官网,现在只是把自己的一些理解写出来给大家一起讨论学习
    Vue官网

    系列文章目录,Vue学习目录,每一章都有代码例子说明

    六、Vue组件数据

    6.1 组件可以直接访问Vue实例的数据吗?比如直接用{{}}

    答案是不能。
    组件是一个单独功能模块的封装(相当于一个小的Vue实例),就是这个模块有属于自己的HTML模板,也有自己属性数据data。
    我们看看下面的代码,我们在子组件直接用{{mes}}来使用父组件的data属性的值mes

    <body>
    <div id="app">
        <component1></component1>
    </div>
    <template id="component1">
        <div>
            <h2>{{mes}}</h2>
        </div>
    </template>
    </body>
    <script src="../css/vue.js"></script>
    <script>
        const component1 = {
            template: '#component1'
        }
        const app = new Vue({
            el: '#app',
            data:{
              mes: "实例数据"
            },
            components: {
                'component1': component1
            }
        })
    </script>
    

    运行结果报错了,写着"mes1"没找到

    vue.js:634 [Vue warn]: Property or method "mes" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
    found in
    ---> <Component1>
           <Root>
    

    在这里插入图片描述

    6.2 组件数据存放

    组件对象也有一个data属性,但是data属性必须是一个函数,然后这个返回的对象,对象内部保证这数据

    <body>
    <div id="app">
        <component1></component1>
    </div>
    <template id="component1">
        <div>
            <h2>{{mes}}</h2>
        </div>
    </template>
    </body>
    <script src="../css/vue.js"></script>
    <script>
        const component1 = {
            template: '#component1',
            data(){
                return{mes: "实例数据"}
            },
        }
        const app = new Vue({
            el: '#app',
            components: {
                'component1': component1
            }
        })
    </script>
    

    6.3 Vue组件中的data为什么是函数?

    为什么组件的data是一个函数,官网说: 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝
    我们都是知道,对象一旦创建就会指定一个地址,每个人去用这个对象的时候,都是修改对象的属性值,地址是不是改变了,然后回想一下,组件的使用很多时候都是要复用的,你复用的时候,都会想着每个组件的数据都是单独维护的,不要相互影响。如果对象都是只是创建一次,那就会出问题了,现在有一个组件使用了两次,data内存地址都是一个,那一个组件修改了data,另一个组件的值也会跟着改变,这个是我们最不想看到的情况。那data是一个函数的话就不一样了,函数每次返回的对象都是一个新对象,这样就保持了每个组件的对象都不想相互影响

    一句话:就是为了保证每个组件的data对象都是相互独立

    展开全文
  • Vue组件

    2020-09-29 14:16:01
    Vue组件 1.组件定义 1.定义组件并引用 2.父组件向子组件传值 3.子组件向父组件传值 # 组件间传值: vuex(https://www.cnblogs.com/xiaonq/p/9697921.html) 1.1 什么是组件 1.Html中组件,是一段可以被复用的...

    Vue组件

    1.组件定义

    1.定义组件并引用 
    2.父组件向子组件传值 
    3.子组件向父组件传值 
    # 组件间传值:
    vuex(https://www.cnblogs.com/xiaonq/p/9697921.html)
    

    1.1 什么是组件

    1.Html中有组件,是一段可以被复用的结构代码
    2.Css中有组件,是一段可以被复用的样式
    3.Js中有组件,是一段可以被复用的功能
    4.Vue中也有组件,指的就是一个模块,是一个独立的,完整的(包含html,css,js等),可以直接拿来用的
    

    1.2 组件特性

    1.组件的实例化对象,跟vue实例化对象一样,因此,我们也可以将vue实例化对象看成组件
    2.组件间是独立的,因此数据要独立存储,方法要独立定义, 彼此间不能共享 。
    

    2.父组件向子组件传值

    2.1 components/Child.vue 定义子组件

    <template> 
    	<div style="color: red"> 
    		<h1>子组件内容</h1> 
    		<p>{{data}}</p> 
    	</div> 
    </template> 
    
    <script> 
    	export default { 
    		// 子组件要使用父组件的数据,只需要一步,在 props中接收父组件的属性 
    		props: ['data'], // 接收父组件给子组件定义的属性 
    		} 
    </script>
    

    2.2 components/Father.vue 定义父组件

    <template> 
    	<div> 
    		<h1>父组件内容</h1> 
    		父组件显示:{{msg}} 
    		<!--3.第三步:把父组件的某一个属性传递给子组件--> 						<Child :data='msg' >
    		</Child> 
    	</div>
    </template> 
    
    <script> 
    	// @指定的是src路径 
    	import Child from '@/components/Child' // 1.第一步:在父组件中导入子组件 
    	export default { 
    		// 2.第二步:父组件中注册子组件 
    		components: { 
    			Child 
    		},
    		data() { 
    			return { 
    				msg: '父组件的信息' 
    			} 
    		},
    		methods: { 
    		} 
    	} 
    </script>
    

    2.3 router/index.js 中注册路由

    import Father from '@/components/Father' // @修饰符指的是 src目录 
    export default new Router({ 
    	routes: [ 
    		{ path: '/component', name: 'Father', component: Father }, 
    	] 
    })
    

    2.4 测试
    子组件中可以通过 定义 props 属性来接收父组件的数据
    在这里插入图片描述

    3.子组件向父组件传值

    3.1 components/Child.vue 子组件通过触发方法, 向父组件传值

    <template> 
    	<div>{{data}} 
    		<button @click="emitfather">调用父组件方法</button> 
    	</div> 
    </template> 
    <script> 
    	export default {
    	  props: ['data'], // 接收父组件给子组件定义的属性 		
    	  methods: { 
    	  	emitfather() { 
    	  		console.log('调用emitfather方法') 
    	  		//1.子组件调用父组件方法,并传值 
    	  		// $emit 触发当前实例上的事件,也可以简单的理解为触发父组件上的事件(向上冒泡) 
    	  		this.$emit('changeMsg', '子组件信息修改后的data信息,传递给父组件') 
    	  		} 
    	  	} 
    	} 
    </script>
    

    3.2 components/Father.vue 给子组件添加事件及事件处理方法

    <template> 
    	<div> 
    	父组件显示:{{msg}} 
    	<!--4.把父组件的一个方法传递给子组件--> 
    	<Child 
    		:data='msg' 
    		@changeMsg='change' 
    		></Child> 
    	 </div> 
    </template> 
    <script> 
    	//1.导入 
    	import Child from '@/components/Child' 
    	export default {
    	  //2.注册 
    	  components: {
    	    Child, 
    	    },
    	    data() {
    	      return {
    	        msg: '父组件的信息' 
    	        } 
    	      },
    	      methods: { 
    	      //3.在父组件中定义一个change方法,可以在子组件中触发并传值给父组件 
    	      change(data) { 
    	      	// data接收是子组件中传递的数据 
    	      	// debugger alert('调用了父组件的方法, 接收到信息:'+data) 
    	      	this.msg = data // 更新父组件的内容 
    	      	}
    	      } 
    	    } 
    </script>
    

    3.3 测试
    点击 “调用父组件方法” 就会调用
    在这里插入图片描述

    展开全文
  • 他们究竟有什么区别呢。 作用:‘  export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相...

    大家都熟知在es6中import可以导入已经导出的模块。export用来导出模块。但为什么在vue的代码里我们常见的有export default这种东西。并不是 export 模块名.他们究竟有什么区别呢。
    作用:
     export 用来导出模块,Vue 的单文件组件通常需要导出一个对象,这个对象是 Vue 实例的选项对象,以便于在其它地方可以使用 import 引入。而 new Vue() 相当于一个构造函数,在入口文件 main.js 构造根组件的同时,如果根组件还包含其它子组件,那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例,最终形成一棵组件树。
    区别:
     export 和export default 的区别在于:export 可以导出多个命名模块,例如:

    //demo1.js
    export const str = ‘hello world’

    export function f(a){
    return a+1
    }
      对应的引入方式:

    //demo2.js
    import { str, f } from ‘demo1’
      export default 只能导出一个默认模块,这个模块可以匿名,例如:

    //demo1.js
    export default {
    a: ‘hello’,
    b: ‘world’
    }
      对应的引入方式:

    //demo2.js
    import obj from ‘demo1’
      引入的时候可以给这个模块取任意名字,例如 “obj”,且不需要用大括号括起来。

    展开全文
  • VUE组件

    2020-10-29 15:56:10
    1.组件定义 1.定义组件并引用 2.父组件向子组件传值 ...Vue中也有组件,指的就是一个模块,是一个独立的,完整的(包含html,css,js等),可以直接拿来的 1.2 组件特性 组件的实例化对象,跟vue实例

    1.组件定义

    1.定义组件并引用
    2.父组件向子组件传值
    3.子组件向父组件传值
    # 组件间传值:vuex (https://www.cnblogs.com/xiaonq/p/9697921.html)
    

    1.1 什么是组件

    1. Html中有组件,是一段可以被复用的结构代码
    2. Css中有组件,是一段可以被复用的样式
    3. Js中有组件,是一段可以被复用的功能
    4. Vue中也有组件,指的就是一个模块,是一个独立的,完整的(包含html,css,js等),可以直接拿来用的

    1.2 组件特性

    1. 组件的实例化对象,跟vue实例化对象一样,因此,我们也可以将vue实例化对象看成组件
    2. 组件间是独立的,因此数据要独立存储,方法要独立定义, 彼此间不能共享 。

    2.父组件向子组件传值

    2.1 components/Child.vue 定义子组件

    <template>
    	<div style="color: red">
    		<h1>子组件内容</h1>
    		<p>{{data}}</p>
    	</div>
    </template>
    <script>
    export default {
    	// 子组件要使用父组件的数据,只需要一步,在 props中接收父组件的属性
    	props: ['data'], // 接收父组件给子组件定义的属性
    }
    </script>
    

    2.2 components/Father.vue 定义父组件

    <template>
    	<div>
    		<h1>父组件内容</h1>
    		父组件显示:{{msg}}
    		<!--3.第三步:把父组件的某一个属性传递给子组件-->
    		<Child
    			:data='msg'
    		></Child>
    	</div>
    </template>
    <script>
    // @指定的是src路径
    import Child from '@/views/demo/Child' // 1.第一步:在父组件中导入子组件
    export default {
    	// 2.第二步:父组件中注册子组件
    	components: {
    		Child
    },
    	data() {
    		return {
    			msg: '父组件的信息'
    		}
    	},
    methods: {
    }
    }
    </script>
    

    2.3 router/index.js 中注册路由

    import Father from '@/views/demo/Father'
    Vue.use(Router)
    export default new Router({
    	routes: [
    		{ path: '/component', name: 'Father', component: Father },
    	]
    })
    

    2.4 测试

    子组件中可以通过 定义 props 属性来接收父组件的数据
    在这里插入图片描述

    3.子组件向父组件传值

    3.1 components/Child.vue 子组件通过触发方法, 向父组件传值

    <template>
    	<div>{{data}}
    		<button @click="emitfather">调用父组件方法</button>
    	</div>
    </template>
    <script>
    	export default {
    		props: ['data'], // 接收父组件给子组件定义的属性
    		methods: {
    			emitfather() {
    				console.log('调用emitfather方法')
    				//1.子组件调用父组件方法,并传值
    				// $emit 触发当前实例上的事件,也可以简单的理解为触发父组件上的事件(向上冒泡)
    				this.$emit('changeMsg', '子组件信息修改后的data信息,传递给父组件')
    			}
    		}
    	}
    </script>
    

    3.2 components/Father.vue 给子组件添加事件及事件处理方法

    <template>
    	<div>
    		父组件显示:{{msg}}
    		<!--4.把父组件的一个方法传递给子组件-->
    		<Child
    			:data='msg'
    			@changeMsg='change'
    		></Child>
    	</div>
    </template>
    <script>
    //1.导入
    import Child from '@/views/demo/Child'
    export default {
    	//2.注册
    	components: {
    		Child,
    	},
    	data() {
    		return {
    			msg: '父组件的信息'
    		}
    	},
    	methods: {
    		//3.在父组件中定义一个change方法,可以在子组件中触发并传值给父组件
    		change(data) {
    			// data接收是子组件中传递的数据
    			// debugger
    			alert('调用了父组件的方法, 接收到信息:'+data)
    			this.msg = data // 更新父组件的内容
    		}
    	}
    }
    </script>
    

    3.3 测试

    点击 “调用父组件方法” 就会调用
    在这里插入图片描述

    展开全文
  • vue组件

    2020-09-29 14:46:18
    1.组件定义 1.定义组件并引用 2.父组件向子组件传值 ...Vue中也有组件,指的就是一个模块,是一个独立的,完整的(包含html,css,js等),可以直接 拿来的 1.2组件特性 组件的实例化对象,跟vue实例化
  • Vue 组件

    2020-12-07 11:03:44
    什么组件 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为 js ...
  • 5. Vue 组件怎么

    2021-01-16 16:42:19
    文章目录组件与复用组件用法使用props传递数据基本用法单向数据流数据验证组件通信自定义事件使用v-model非父子组件通信使用slot分发内容什么是slot编译的作用域slot用法作用域插槽访问slot组件的高级用法其他 组件...
  • Vue组件详解

    2020-10-29 20:44:35
    Vue组件 组件定义 什么是组件 Html中组件,是一段可以被复用的结构代码 Css中组件,是一段可以被复用的样式 Js中组件,是一段可以被复用的功能 Vue中也组件,指的就是一个模块,是一个独立的,...
  • Vue组件传值

    2021-03-06 15:53:15
    Vue什么组件化 不知道大家没有思考过这个问题,什么组件Vue什么要是组件化的开发方式呢?其实组件化的思想主要体现在:标准(统一的规范)、分治(独立完成功能)、重用(可以重复使用)、组合(多个...
  • 相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,起来确实很方便,大大减少了我们的开发时间。在一个项目中其实很多可复用的代码块,如果我们可以把这些内容...
  • 相信在使用Vue进行项目开发的时候很多人会接触到vue组件,最常见的就是我们使用的element-ui组件库,起来确实很方便,大大减少了我们的开发时间。在一个项目中其实很多可复用的代码块,如果我们可以把这些内容...
  • 文章目录前言系列文章目录,Vue学习目录,每一章都代码例子说明三、Vue组件模板的分离写法3.1 为什么使用分离写法?3.2 怎么分离元素3.2 完整例子 前言 本博客的内容很多都来自官网,现在只是把自己的一些...
  • VUE组件化开发

    2021-04-30 23:07:08
    有什么用?组件的分类:工程化开发之后:2.什么是组件化?人面对复杂问题的处理方式:组件化也是类似的思想:组件化定义:3.Vue组件化思想组件化是Vue.js中的重要思想组件化思想的应用:二、组件编写方式1.组件注册...
  • 5.2.Vue组件

    2020-11-01 20:09:27
    Vue组件 组件定义 什么是组件 Html中组件,是一段可以被复用的结构代码 Css中组件,是一段可以被复用的样式 Js中组件,是一段可以被复用的功能 Vue中也组件,指的就是一个模块,是一个独立的,完整的...
  • 我们在 vue 开发的时候,经常会用到组件和插件,name组件和插件有什么区别呢?现在就来总结一下。 一、组件是什么? 官方对组件的定义是: 组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现...
  • 甚至根元素可以是另一个组件(案例:vue-cli——app.vue)! 拓展1:浅析Vue构建HTML Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中,你真的需要 JavaScript 的完全编程的能力。这时你可以渲染...
  • vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的全局写法,用到比较少的专供特定页面的使用局部组件。 one—-全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:’ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 958
精华内容 383
关键字:

vue组件有什么用

vue 订阅