补充:父组件给子组件传值以及子组件向父组件传值

参考:https://segmentfault.com/a/1190000011882494

父组件向子组件传数据

父组件中data中定义传输的值,如todoLists:[],

在标签中绑定::新定义的名字="data中定义的数据名字",如:todolist1="todoLists"

子组件中props:['新名字'],如prop:['todolist1'],这样,在子组件需要的地方利用todolist1就达到传值的目的

父组件:

 import Page1 from './components/page1'
 export default {
  name: 'app',
  components:{
    'page1':Page1
  }

子组件:

<div class="hello">
    <h2>{{text}}</h2>
  </div>

export default {
  name: 'hello',
  props:['text'],
  data () {    
  }

子组件向父组件传值

子组件中,在methods利用$emit将值传给父组件,如this.$emit('whshow',this.whichshow)

父组件中,在子组件标签中加一个监听,如v-on:whshow="getwhshow",然后在methods中添加方法,getwhshow(msg) {this.fashow=msg}

子组件:

 <input type="text" @change="setUserName" v-model="username" placeholder="请输入用户名">
    
 export default {
  name: 'hello',
  props:['text'],
  data () {
    return {
      msg: '世界',
      username:''
    }
  },
  methods:{
    setUserName:function () {
      this.$emit('outPutName',this.username);
    }
  }
}

父组件:

<page1 :text="text" @outPutName="getUserName"></page1>

  methods:{
    getUserName:function (msg) {
      this.username = msg;
    }
   }

同级组件间传递:

利用子组件1传值给父组件,父组件再传值给子组件2


阅读更多
换一批

没有更多推荐了,返回首页