## 组件 ### 使用组件 ``` //html <div id="app"> <todo-item :content="item" ></todo-item> </div> ``` >:content="item"向子组件传递内容 使用驼峰命名方法就可直接使用xxx-xxx样式的标签 ### 引入组件及注册组件 1.引入 ``` //js import TodoItem from "../components//TodoItem";//引入 ``` 2.注册 ``` export default { components: { //注册 MovieItem }, } ``` ### 定义组件 ``` //组件模板 <template id="content"> <div>{{content}}</div> </template> ``` ``` //js <script> export default { //起名 name: "todo-item", //设置属性向父组件传参 props: { content: { type: String } }, methods:{ //组件模板的方法 } }; </script> ``` **props**属性的另一种传递方式：不添加类型 ``` props:["cities","hotCities","letter"], ```