Vue.js 学习笔记九：组件化开发之组件数据存放二

最新推荐文章于 2022-09-16 19:51:35 发布
最新推荐文章于 2022-09-16 19:51:35 发布
阅读量269 收藏
点赞数 1
分类专栏： Vue.js 学习笔记 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27875933/article/details/116189363
版权

目录

组件数据存放二

双向绑定案例

methods 实现

watch 实现

父组件中使用 v-model

父子组件访问方式

组件数据存放二

双向绑定案例

 

methods 实现

		<div id="app">
			<my-input :input="inputVule" @change="changeVal" />			
		</div>
		<template id="my-input">
			<div>
				<input type="text" v-model="value" @input="change" />
                <!-- 等同于 -->
                <!-- <input type="text" @input="change(value = $event.target.value)" /> -->
				<p>props 当前值：{{ input }}</p>
				<p>data 当前值：{{ value }}</p>
			</div>
		</template>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					inputVule: ‘props value’
				},
				methods:{
					changeVal(value) {
						this.inputVule = value
					}
				},
				components:{
					'my-input': {
						props: {
							input : String
						},
						template: '#my-input',
						methods: {
							change() {
								this.$emit('change', this.value)
							}
						},
						data() {
							return {
								value: 'data value'
							}
						}
					}
				}
			})
		</script>

 

watch 实现

		<div id="app">
			<my-input @change="changeVal" :input="inputVule" />			
		</div>
		<template id="my-input">
			<div>
				<input type="text" v-model="value" />
				<p>props 当前值：{{ input }}</p>
				<p>data 当前值：{{ value }}</p>
			</div>
		</template>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					inputVule: 'props value'
				},
				methods:{
					changeVal(value) {
						this.inputVule = value
					}
				},
				components:{
					'my-input': {
						props: {
							input : String
						},
						template: '#my-input',
						data() {
							return {
								value: 'data value'
							}
						},
						watch: {
							value(newVal, oldVal) {
								console.log(newVal)
                                console.log(oldVal)
								this.$emit('change', newVal)														}
						}
					}
				}
			})
		</script>

 

父组件中使用 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

<div id="app">
			<my-checkbox v-model="checkValue" />			
		</div>
		<template id="my-checkbox">
			<div>
				<input type="checkbox" :checked="checked" @change="changeVal" />
				<p>props 当前值：{{ checked }}</p>
				<p>data 当前值：{{ value }}</p>
			</div>
		</template>
		<script type="text/javascript">
			const app = new Vue({
				el: '#app',
				data:{
					checkValue: false
				},
				components:{
					'my-checkbox': {
						props: {
							checked : Boolean
						},
						model: {
							prop: 'checked',
							event: 'change'
						},
						template: '#my-checkbox',
						data() {
							return {
								value: false
							}
						},
						methods: {
							changeVal(event) {
								this.value = event.target.checked
								this.$emit('change', this.value)
							}
						}
					}
				}
			})
		</script>

 

父子组件访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。

父组件访问子组件：使用 $children 或 $refs。

子组件访问父组件：使用 $parent。

$children

		<div id="app">
			<parent-c></parent-c>
		</div>
		<template id="parent">
			<div>
				<button @click="getChildC">获取所有子组件信息</button>
				<child-c1></child-c1>
				<child-c2></child-c2>
			</div>
		</template>
		<template id="child1">
			<div>
				<p>{{ msg }}</p>
			</div>
		</template>
		<template id="child2">
			<div>
				<p>{{ msg }}</p>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('parentC', {
						template: '#parent',
						methods: {
							getChildC() {
								const children = this.$children;
								for (let child of children) {
									console.log(child.msg);		
								}														
							}
						},
						components:{
							'child-c1': {
								template: '#child1',
								data() {
									return {
										msg: '我是子组件1信息'
									}
								}
							},
							'child-c2': {
								template: '#child2',
								data() {
									return {
										msg: '我是子组件2信息'
									}
								}
							}
						}
					})
			const app = new Vue({
				el: '#app'
			})
		</script>

$refs

$children有个缺陷，通过 $children 访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用 $refs。

$refs 和 ref 指令通常是一起使用的。

我们先通过 ref 给某一个子组件绑定一个特定的 ID。再通过this.$refs.ID 就可以访问到该组件了。

		<div id="app">
			<parent-c></parent-c>
		</div>
		<template id="parent">
			<div>
				<button @click="getChildC">获取所有子组件信息</button>
				<child-c1 ref="child1"></child-c1>
				<child-c2 ref="child2"></child-c2>
			</div>
		</template>
		<template id="child1">
			<div>
				<p>{{ msg }}</p>
			</div>
		</template>
		<template id="child2">
			<div>
				<p>{{ msg }}</p>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('parentC', {
						template: '#parent',
						methods: {
							getChildC() {
								/* const children = this.$children;
								for (let child of children) {
									console.log(child.msg);		
								} */
								console.log(this.$refs.child1.msg);	
								console.log(this.$refs.child2.msg);
							}
						},
						components:{
							'child-c1': {
								template: '#child1',
								data() {
									return {
										msg: '我是子组件1信息'
									}
								}
							},
							'child-c2': {
								template: '#child2',
								data() {
									return {
										msg: '我是子组件2信息'
									}
								}
							}
						}
					})
			const app = new Vue({
				el: '#app'
			})
		</script>

$parent

如果我们想在子组件中直接访问父组件，可以通过$parent。

		<div id="app">
			<parent-c></parent-c>
		</div>
		<template id="parent">
			<div>
				<button @click="getChildC">获取所有子组件信息</button>
				<child-c1 ref="child1"></child-c1>
				<child-c2 ref="child2"></child-c2>
			</div>
		</template>
		<template id="child1">
			<div @click="showParent">
				<p>{{ msg }}</p>
			</div>
		</template>
		<template id="child2">
			<div @click="showParent">
				<p>{{ msg }}</p>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('parentC', {
						template: '#parent',
						data() {
							return {
								msg: '我是父组件信息'
							}
						},
						methods: {
							getChildC() {
								/* const children = this.$children;
								for (let child of children) {
									console.log(child.msg);		
								} */
								console.log(this.$refs.child1.msg);	
								console.log(this.$refs.child2.msg);
							}
						},
						components:{
							'child-c1': {
								template: '#child1',
								data() {
									return {
										msg: '我是子组件1信息'
									}
								},
								methods: {
									showParent() {
										console.log(this.$parent.msg)
									}
								}
							},
							'child-c2': {
								template: '#child2',
								data() {
									return {
										msg: '我是子组件2信息'
									}
								},
								methods: {
									showParent() {
										console.log(this.$parent.msg)
									}
								}
							}
						}
					})
			const app = new Vue({
				el: '#app'
			})
		</script>

注意事项： 尽管在 Vue 开发中，我们允许通过 $parent 来访问父组件，但是在真实开发中尽量不要这样做。 子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。 如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。 另外，更不好做的是通过 $parent 直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。

stary1993
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue学习笔记（超详细）
jiey0407的博客
03-09 5554
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
《Vue入门到精通系列之二》--- 组件化开发与前端模块化
最新发布
2401_84097798的博客
04-20 709
首先，如果不是一个函数，Vue直接就会报错。其次，原因是在于Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响6.父子组件通信技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。
从零开始学VUE之组件化开发(组件数据的存放)
彼岸舞的博客
06-02 106
组件数据的存放 组件无法直接访问页面的对象数据 组件对象也有自己的data属性(也可以有Methods方法) 只是这个data属性必须是一个函数 而且这个函数返回一个对象,对象内部保存着数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
Vue.js 学习笔记九：组件化开发之组件数据存放一
Stary 的 IT 之旅
04-27 321
目录 组件数据存放一 props 基本用法 props 数据验证 子级向父级传递 组件数据存放一 组件对象也有一个 data 属性（也可以有 methods 等属性），只是这个 data 属性必须是一个函数而且这个函数返回一个对象，对象内部保存着数据： <div id="app" > <my-component></my-component> </div> <script type="text/javascript"
vue习题
热门推荐
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
VUE组件
xyx_x的博客
05-21 390
VUE Component 一、概述 1. 作用 扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。 二、VUE前情回顾 使用： 页面中必须要有一个标签（不一定是div）。 <div id=app> </div> 定义一个vue变量,绑定标签 <script> new Vue({ el:'#app', data:{ ...
vue前端面试刷题练习1 峰峰博客
程序员峰峰
03-15 1万+
一、选择题 1．在Vue实例中可以定义方法的是（ B ）选项。 A. el B. methods C. data D. computed 2．下列指令中，不能实现条件判断的是（ D ）。 A. v-if B. v-else C. v-show D. v-bind 3．下列代码的运行结果为（ B ） <div id="example"> <p>{{len}}</p> </div> <script type="text
关于Vue.js一些问题和思考学习笔记（1）
10-20
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、数据驱动和易上手的特点深受开发者喜爱。在本文中，我们将探讨几个关于Vue.js的重要知识点，包括数据绑定、属性初始化、`v-model`的处理以及`methods`和`...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3794
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
超详细Vue组件化开发（一）
qq_39586440的博客
11-27 538
Vue学习笔记一、什么是组件、为什么使用组件？二、组件基础1.注册并使用组件2.读入数据总结 一、什么是组件、为什么使用组件？ 把整个页面划分为一个个小的模块，这些模块共同完成整个页面的功能，这些小模块就是组件。图片左侧是组件示意图，这个页面由多个组件构成，有的组件内部还包含多个组件。右侧是组件的组织形式，组件树。使用组件开发工程，可以帮助我们管理，组件的可复用性提高了开发效率。 二、组件基础 1.注册并使用组件 代码如下（示例）： <script> 2.读入数据 代码如下（示例）：
新手Vue3学习第五天
m0_53479584的博客
09-16 781
如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。vue3中没有明确的兄弟组件传值的方案，可以使用状态提升（找到这两个组件共同的父级组件，然后通过父与子之间的传值实现）放在DOM元素上，获取DOM节点，放到组件上，获取子组件的实例，可以直接使用子组件的属性和方法。可能A负责父组件的编写，B负责了子组件的编写，容易造成 不知道 自定义的属性名的 数据类型。
Vue 子组件修改父组件传递过来的值
weixin_45442464的博客
08-26 1万+
1. 常用的方法 一般通过子组件修改父组件传递过来的值,我们就会采用props和$emit进行单向数据绑定 父组件: <template> <div> <test :value="value" @change="change"></test> </div> </template> <script> import test from '@/components/test.vue' export d
VUE 子组件向父组件传值（含传多值以及添加额外参数场景）
weixin_43242112的博客
08-31 1万+
一、子组件向父组件传递一个值 子组件： this.$emit('change', this.value); 父组件： <!-- 在父组件中使用子组件 --> <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" /> // 事件处理函数 async costPlannedAmountChange(value) { console.log(value
前端知识点-----父子组件的深入使用
qq_44973583的博客
07-06 930
调用自身组件
开关组件欢迎
weixin_58582171的博客
04-21 181
<template> <view @click="toggle" class="evan-switch" :class="{'evan-switch--disabled':disabled}" :style="{width:2*20+'px',height:24+'upx',borderRadius:size+'px',backgroundColor:currentValue===activeValue?activeColor:inactiveColor}"> ...
VUE父组件监听$emit事件，如何传递多个父组件自己的参数
kouryoushine的博客
10-17 4675
背景 子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数 父组件监听事件传参有两种方式 方式1：父组件自己无参数 方法名可以不用带参数，函数中的e代表change事件的对象，直接获取参数即可 <uni-rate value="5" @change="clickStar" :activeColor="star...
vue -- $emit change
笑望灬星辰
11-29 4444
子组件数据发生变化时 通过change反射给父组件 该场景在多数第三方ui库都有看到 当然实现方式有多种方式 本文采取主流的 change 事件反射 element-ui 一个input组件中 直接上代码 父组件 <template> <div> <children @change="getChange"></children> </div> </template> <script> import
【vue】子组件跟父组件通信this.$emit()的使用
庭落
05-06 3506
父组件： <template> <addcz @closecz="closecz"></addcz> </template> <script> export default { 　　components: { 　　 addcz 　}, methods: { closecz(){ ...
vue 中this.$emit()的返回值是什么？
weixin_34383618的博客
04-06 4830
#vue中this.$emit();返回值是什么 vue中的三大属性:属性 、事件、插槽，---事件 在事件中有 普通事件：@click/@input/@change/@xxx...事件； 修饰符事件：@input.trim,@click.stop,@submit.prevent...一般用于原生html元素； 答：在vue中this.$emit(); 返回值是this; 代码示例： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

stary1993

你的鼓励是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值