vue.js之定义组件和子父组件数据传递及函数的相互调用

import Vue from 'vue'// 定义一个名称为componentOne的组件
const componentOne = {// props 用来接收父项所传递过来的数据，该数据是挂载在本组件上，可以直接用this.调用props: {active: {type: Boolean, // 定义父项传递数据的类型require: true // 是否为必传项,默认为false},propsOne: String},template: `<div><span v-show="active" v-model="val">see me is active?</span><span @click="handleChange">{{propsOne}}</span></div>`,data () {return {val: '123'}},methods: {handleChange () {// 子项调用父项的方法，第一个参数是调用父项的方法名，后面的参数是父项方法所需的参数this.$emit('changeParentVal', '111')},changeChildVal(parm) {this.val = parm}}
}new Vue({// 接收所需要的子项组件components: {ComOne: componentOne },el: "#id",template: `<div><com-one :active="false" :prop-one="val1" ref="oneCom"><com-one><span @click="changeChildVal"></span></div>`,data: {val1: '123' },methods: {changeParentVal(parm) {this.val1 = '456'console.log(parm)},changeChildVal () {// 通过$refs找到指定的子项组件，并主动调用子项组件的方法this.$refs.oneCom.changeChildVal('312')}}
})

vue.js之定义组件和子父组件数据传递及函数的相互调用相关推荐

js和cs的值相互传递和函数的相互调用
转载于:Js与cs的值相互传递和函数的相互调用 cs传值给js aspx代码: <%@ Page Language="C#" AutoEventWireup="tr ...
使用vue的sync修饰符进行子父组件的数据绑定
官方文档父组件代码 <template><div><input type="button" value="我是父组件的按钮" @ ...
利用v-model实现父子组件传值——子父组件同步更新
v-model介绍 v-model 是Vue的一个很大的特色,可以实现双向数据绑定.v-model本质上是语法糖,它负责监听用户的输入事件以更新数据. v-model 在内部使用不同的属性为不同的输入 ...
Vue.js-Day03-PM【组件通信（安装Vetur插件、父子组件通信、子父组件通信）、项目发送与启动（项目发给别人、启动别人的项目）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 6.组件通信安装 Vetur 插件 6.1.父子组件通信子定义props 父组件模板图解 6.2.子父组 ...
vue 子级拿值_Vue 父组件主动获取子组件的值，子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header" 2. 在父组件中通过this.$refs.header.属性,调用子组件的属性 ...
Vue 父子和子父组件通信
父子组件通信父组件中定义一个数据 data( ) { return { money: 1111 } } 在父组件的模板中,用 v-bind 将父组件的数据绑定在子组件身上在子组件的选项中,通过pr ...
vue中父子组件先后渲染_VUE如何实现子父组件、父子组件、兄弟组件传值
父子组件传值: 父组件定义: 代码示例子父组件传值: 父组件方法定义: 子组件执行父组件方法定义: methods: { closeOrOpenLeftMenu() { if (this.isLef ...
get vue 和set 用法_深入剖析Vue源码 - 数据代理，关联子父组件
简单回顾一下这个系列的前两节,前两节花了大篇幅讲了vue在初始化时进行的选项合并.选项配置是vue实例化的第一步,针对不同类型的选项,vue提供的丰富选项配置策略以保证用户可以使用不同丰富的配置选项. ...
vue 父组件调子组件方法_vue父组件调用子组件有哪些方法
这次给大家带来vue父组件调用子组件有哪些方法,vue父组件调用子组件的注意事项有哪些,下面就是实战案例,一起来看一下. 情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组 ...

vue.js之定义组件和子父组件数据传递及函数的相互调用

vue.js之定义组件和子父组件数据传递及函数的相互调用相关推荐

最新文章

热门文章