1.父组件向子组件传值
<html> <head> <meta charset='utf-8'> <title>
title>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'>
script>
head> <body> <div id="app">
<my-info v-bind:parentmsg="msg">
my-info>
div> <template id="test"> <h2 >{
{parentmsg}} ----{
{name}}
h2>
template>
body> <script> var myInfo = {
template:'#test', data(){
// 子组件的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如组组件通过Ajax请求回来的数据，而后放在了data上，以供使用，data上的数据可读可写 return {
name:"123"} }, // props 官方建议 只读，无法重新赋值！ // 从父组件传递过来的parentmsg属性，需要在props定义后，才可以在子组件中使用 props:['parentmsg'] }; let vm = new Vue({
el:'#app', data:{
msg:'test msg' }, components:{
//表示的意思 myInfo:myInfo 支持驼峰命名方法 使用时
2.子组件向父组件传值
<html> <head> <meta charset='utf-8'> <title>
title>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'>
script>
head> <body> <div id="app">
<my-info v-on:test-func="alertInfo">
my-info>
div> <template id="test"> <div> <h2 >{
{testmsg}}
h2> <input type="button" value="点击调用" v-on:click="useParentFunc" />
div>
template>
body> <script> var myInfo = {
template:'#test', data(){
return{
testmsg:"testmsg !!!" } }, methods:{
useParentFunc:function(){
//$emit 调用说明 第一个参数 组件定义上定义的v-on:testFunc 的名称，第二个参数以及后面的参数都事回传的data this.$emit('test-func',this.testmsg) } } }; let vm = new Vue({
el:'#app', data:{
msg:'test msg' }, methods:{
alertInfo:function(data){
alert('调用了父类的方法，并回传了:'+data) } }, components:{
//表示的意思 myInfo:myInfo 支持驼峰命名方法 使用时
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/228334.html原文链接：https://javaforall.net
