vue中父组件向子组件传值(props) (原创)

App.vue 要向Menu组件传入一些属性值: Menu组件中指定props，定义需要接收来自父组件的属性列表。

如图:

App.vue 

<template>
  <div id="app">

    <me href="https://www.baidu.com" title="百度一下" content="百度" />
    <me href="https://www.jd.com" title="京东" content="京东商城"  />
    <me href="https://www.taobao.com" title="淘宝" content="淘宝网"  /> 

 
  </div>
</template>
<script>

import me from './components/Menu'
export default {
  name: 'App',
  components: {
    me
  },
  
}
</script>

<style scoped>

</style>

注： 因html5中已存在了menu标签，为防止标签名重复，笔者特意在import Menu组件时将其命名为了me。

Menu.vue

<template>
  <div>
     <p>
       菜单项：
     <a :href="href" :title='title' target="_blank">{{content}}</a>

     </p>
  </div>
</template>

<script>
export default {
  name: 'mu',
  data () {
    return {

    }
  },
   //props表示可以从外部(父组件)传入的属性，
   // props中定义的属性可以作为元素自身的data和methods属性来使用
  props:['href','title','content'],

   
}
</script>

<style scoped>

</style>