vue --- 从模块从父元素获取数据

vue的精彩之处在于其组件的可复用性.下面谈谈组件(component)如何从父元素获取数据

模块引用

首先说说,如何引用模块

<div id="app"><my-component ></my-component>
</div>
<script src=“unpkg.com/vue/dist/vue.min.js”> </ script>   // vue的CDN
<script>Vue.component('my-component',{  // 模块的声明,注意:一定要在Vue实例挂载之前template: '<div> {{ message }}</div>'   // 模块的模板, 用于替换<my-component>中的内容})var app = new Vue({el:"#app",})
</script>

此时,自定义模块my-component就在父元素内了.

props

vue提供了一个props属性,它的作用是将父元素的数据,正向传递给子模块,例如:

// 改变<my-component>,将message数据(父元素)绑定到该模块上
<div id = "app"><input type="text" v-model.lazy="msg" placeholder="你有什么想对我说"><my-component message="来自父元素的消息" :warning-one="msg"></my-component>
</div>
// 在模块声明中加一个props属性,其值是一个数组,注意在<my-component>中的warning-one,对应到JS声明中是warningOne(驼峰)
Vue.component('my-component',{props:[''message","warningOne"],  // 继承父元素的数据template:'<div> {{ message}}:  {{warningOne}}</div>',  // 模板用于显示
});
var app= new Vue({el: "#app",data:{msg: ' '}
});

看下效果:

输入:晚上一起看电影(在乎你)吧~

老规矩,整体代码如下:

<!DOCTYPE html>
<html><head><meta charset="utf-8">
</head><body><div id="app"><input rtpe="text" v-model.lazy ="msg" placeholder="你有什么想对我说"><my-component message="来自父组件的消息" :warning-one="msg"></my-component></div><script src="https://unpkg.com/vue/dist/vue.min.js"></script><script >Vue.component('my-component',{props: ['message','warningOne'],template: '<div>{{ message }}:   {{warningOne}}</div>'});var app = new Vue({el:"#app",data:{msg:''}})</script>
</body></html>

vue --- 从模块从父元素获取数据相关推荐

vue --- 模块从子组件获取数据
先看个一般的例子: // 我们需要将信息从子组件传递给父组件,(有可能不止一条信息,因此)肯定需要一个标识,这个标识放在$emit里面(js),在dom中通过@来关联父元素.如下:<div id ...
js父元素获取子元素img_JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名 ...
vue3 父组件获取数据传值给子组件，子组件有值，但是不渲染
问题所在就在于,父组件异步获取数据,传给子组件时候,子组件可能已经渲染出来了,所以数据虽然获取到了,但是并没有渲染. 父组件: 1.从接口获取数据 const annular2 = reactive( ...
vue使用echarts是，动态获取数据，动态更新图表数据。
当我们初始化完数据后,需要更新数据时,虽然请求成功,获取到新的数据.但是echarts的图表没有根据数据更新而更新,原因是数据更新了,但echarts还是初始化时的那个. 我们可以在请求成功后,重新初 ...
vue中子组件向父组件传递数据（实现加减的实例）
这里讲解一下子组件向父组件传递值的常用方式. 这里通过一个加减法的实例向大家说明一下,这个的原理. 如下图所示: 当没有任何操作的时候父组件的值是 0 当点击加号以后父组件的值是 1 当点击减号以后父 ...
js父元素获取子元素img_css,前端_父标签div中包含一个子元素img标签，子元素div标签，为什么img要加上浮动，子元素div才会处于正常位置？，css,前端 - phpStudy...
父标签div中包含一个子元素img标签,子元素div标签,为什么img要加上浮动,子元素div才会处于正常位置? dom结构如图img加上float 子元素div显示正常. 不加float div显 ...
vue.js--基础事件定义，获取数据，执行方法传值
<template><div id="app"> <h1>{{ msg }}</h1> <br> <button ...
vue子组件向父组件传递数据
子组件 <template><div id="header"><input type="text" v-model="u ...
Vue 点击获得父元素，子元素，兄弟元素（DOM操作）
<ul @click ="clickfun($event)"><li></li> </ul>methods: {clickfun(e ...

vue --- 从模块从父元素获取数据

模块引用

props

vue --- 从模块从父元素获取数据相关推荐

最新文章

热门文章