vue组件传值之父传子

1.父组件给子组件传值  home父组件  header子组件  关键字props

home代码

<template>
  <div>
    <v-header :title="title" :run="run"></v-header>
    <h2>我是home组件</h2>
  </div>

</template>

<script>
import Header from ‘./Header‘
export default {
  data() {
    return {
      msg: "msg",
      title:"hello"
    };
  },
  components:{
    ‘v-header‘:Header
  },
  methods: {
    run(val) {
      alert(val);
    }
  },

};
</script>

header代码

<template>
  <div>

    <h1>我是header组件--{{title}}</h1>
    <button @click="run(123123)">调父组件函数</button>
  </div>

</template>

<script>
export default {
  data() {
    return {
    };
  },
  props:[‘title‘,‘run‘]

};
</script>

效果:

原文地址:https://www.cnblogs.com/v616/p/11263147.html

时间: 2024-11-06 07:27:24

vue组件传值之父传子的相关文章

VUE组件通信(父传子)

首先把父组件要传输的数据用自定义属性绑定在标签上 <father :father_data=' data '></father> 在子组件中用prpos接收 const childcomponent = { template:'<child>{{son_data}}</child>', props:[' father_data'], //props['属性名'] (在父组件中用来绑定数据的属性名) data(){ return{ //用来接收数据的变量 so

v-once指令、v-cloak指令、条件指令家族、原义指令、循环指令、todolist案例、实例成员-符号、实例成员-计算属性、实例成员-属性监听、监听的案例、局部组件、全局组件、组件交互(父传子、子传父)

v-once指令: v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <div id="app"> <input type="text" v-model="msg"> <!-- 一旦赋值,只可主动更改 --> <input type="text" v-model="msg" v-once> <p>{{ m

【vue组件之间互相传值:父传子,子传父】

今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性 3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值 4.保存修改的文件,查看浏览器 5.我们依然可以对message的值进行v-bind动态绑定 此

vue 组件传值

vue 组件传值分为 父传子.子传父.非父子传值 父组件访问子组件的值 子组件中通过this.$emit('childName',childData) 父组件通过v-on监听一个事件  @childName = "childData"    methods:{ childData (data) { console.log(data) } } 父组件通过 ref 获取子组件的值 在子组件通过ref,在父组件中通过this.$refs.refsName访问子组件中的值 注意:当 ref 和

浅谈VUE传值问题,父传子,子传父,兄弟传兄弟。。。

首先我们先定义3个页面,一个主页面,两个子页面 例:myForm 和 myTabel 是定义的两个子页面 第一步:在主页面引入 import myForm from "@/MyForm"; import myTabel from "@/MyTable"; 第二步:在 components 注册  (注册完必须进行第三步.不然会报错) components: {     myForm,     myTabel, } 第三步:插入 <myForm></

vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this.$emit("父组件上的方法名",a)     /-------a------/代表需要传递的参数        兄弟组件通讯   需要创建一个公共的vue 实例, new vue()    在main.js里 书写Vue.prototype .com=new vue()    通过pr

Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值

Vue常用的三种传值方式有: 父传子 子传父 非父子传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息 1. 父组件向子组件进行传值 父组件: <template> <div> 父组件: <input type="text" v-model="name"> <!-- 引入子组件 --> <child :abc=

vue中组件间的通信,父传子,子传父

参考文章 :https://www.cnblogs.com/yszblog/p/10135969.html 1 父传子 子组件Vue 父组件 注册子组件 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 2 通过$emit  子组件向父组件传值 2.1 子组件Vue 2.2 父组件 2.3 父组件监听子组件发射的事件名 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件 将需要

React传值(子传父,父传子)

1.子传父 子组件事件调用父组件事件,将State或其他值当成参数传过去,父组件调用该参数,达到传值的效果 2.父传子 利用props属性传值,this.props.data 原文地址:https://www.cnblogs.com/vancissell/p/12367179.html