Vue：父组件传值

最新推荐文章于 2024-06-13 16:15:47 发布

Yivisir

最新推荐文章于 2024-06-13 16:15:47 发布

阅读量78

点赞数

分类专栏：前端 javascript vue 文章标签： vue js

本文链接：https://blog.csdn.net/yivisir/article/details/108448453

版权

前端同时被 3 个专栏收录

63 篇文章 0 订阅

订阅专栏

javascript

60 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

Vue：父组件传值

prop : prop是一个子组件用来接收父组件传递过来的数据的一个自定义属性。
父组件的数据都需要通过props把数据传递给子组件，子组件需要显示地调用props选项声明；

创建静态实例

<div id='app'>
    <child msg="ComesFromFather"></child>
</div>

<script>
	Vue.component('child',{
        // 声明props
        props : ['msg'],
        template : `<span>{{ msg }}</span>`
    })
	
	new Vue({
        el : "#app"
    })
</script>

创建动态实例

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>

    Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 同样也可以在 vm 实例中像 "this.message" 这样使用
      template: '<span>{{ message }}</span>'
    })

    new Vue({
      el: '#app',
      data: {
        parentMsg: '父组件内容'
      }
    })
</script>