Vue.js传参方法汇总

一. prop 传参

单向下行绑定:父级 prop 的更新会向下流动到子组件中，但是反过来则不行.

大小写不敏感
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

1.静态传参

<blog-post title="My journey with Vue"></blog-post>

2.动态传参

<blog-post v-bind:title="post.title"></blog-post>

<blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>

传数字、布尔值、数组、对象

<blog-post v-bind:likes="42"></blog-post>

<blog-post v-bind:is-published="false"></blog-post>

<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<blog-post v-bind:author="{name: 'Veronica', company: 'Veridian Dynamics'}"></blog-post> 

传入对象的所有属性

<blog-post v-bind="post"></blog-post>

等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

二.事件传参

$event 是原始 DOM 事件

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

三.$emit 监听事件传参

驼峰式命名

1.用法

<input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >

2.prop “双向绑定”使用 .sycn

子组件中触发事件

this.$emit('update:title', newTitle)

父组件中写法prop传参使用 .sync

<text-document v-bind:title.sync="title"></text-document>

3.子组件中触发事件的语法:

this.$emit('myEvent')

this.$emit('myEvent', newTitle)

四.vue-router 传参

1.路由组件直接传参

const User = {
  template: '<div>User {{ $route.params.id }}{{$route.query.plan}}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

// 命名的路由
router.push({ name: 'user', params: { id: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

2.props 解藕传参

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },
    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', 
      component: Promotion, 
      props: { newsletterPopup: false } }
  ]
})

函数模式

你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [
    { path: '/search', 
      component: SearchUser, 
      props: (route) => ({ query: route.query.q })
    }
  ]
})

URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件。

请尽可能保持 props 函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义 props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。