Vues父子组件之间传值

js中写法：

var com1 = {template: "#temp",data(){return {msg: '子组件获取到了父组件的1000'}},props:['parentmsg'],methods: {sendMsg(){this.$emit('func',this.msg);}}
};
var vm = new Vue({el:"#newBrand",data:{msg:'父元素数据，1000',msgFromson: ''},methods:{getMsgFromson(data){this.msgFromson = data;console.log(this.msgFromson);}},components:{com1}
});

html中写法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VueTest</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="newBrand"><com1 :parentmsg="msg" @func="getMsgFromson"></com1>
</div>
<template id="temp"><div><h1>这是子元素 --- {{ parentmsg }}</h1><input type="button" value="向父组件传递消息" @click="sendMsg"></div>
</template>
<script src="js/newBrand.js"></script>
</body>
</html>

Vues父子组件之间传值相关推荐

【微信小程序】父子组件之间传值
微信小程序父子组件之间传值有两种: 1.父组件向子组件传值 2.子组件向父组件传值区别: 父向子传值使用的是属性绑定,子组件中的properties对象进行接收父组件传递过来的值. 子向父传值使用的 ...
vue父子组件之间传值的方法
vue父子组件之间传值的方法一.基本父子传值父传子方式: props 效果: 把父组件的fatherName属性传入子组件,在子组件中使用父组件代码: <template>< ...
Vue项目中实现父子组件之间传值
1.路由配置:使用children属性实现路由嵌套,嵌套的组件关系就是父子组件关系 {path: '/father',name: 'father',component: father,children ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
Vue非父子组件之间传值
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>非父子 ...
uniapp父子组件之间传值
组件传值一. 父组件向子组件传值通过props来实现, 子组件通过props来接收父组件传过来的值父组件 // 1. 引入子组件 import zi from '../../components ...
Vue父子组件之间传值
组件分两种,全局组件和局部组件全局组件这么写 Vue.component("nav-bar",{props:['navShow',"elecText",&qu ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
Vue2 组件之间传值
组件件的传值有点复杂,我在这里记录一下哈 Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个 ...
vue组件之间传值的几种方式
vue组件传值父子组件之间传值.几种常见方式第一种方式(父传子) 父组件 <m-child :childMsg="parentMsg"></m-child&g ...

Vues父子组件之间传值

Vues父子组件之间传值相关推荐

最新文章

热门文章