props 传值的方法
- <template>
- <div id="app">
- <PropsComponent :age=25 :person="p" :log-person="logPerson" />
- <p ref="word" class="word"> 我是即将被删除的 </p>
- </div>
- </template>
- <script>
- import PropsComponent from './components/PropsComponent'
- export default {
- name: 'app',
- data(){
- return {
- p: {
- name: '张三丰',
- age: 600
- }
- }
- },
- components: {
- PropsComponent
- },
- methods: {
- logPerson(name, age){
- alert(` 姓名:${name}, 年龄:${age}`);
- },
- }
- }
- </script>
- <style>
- .Word{
- width: 300px;
- height: 200px;
- background-color: red;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- </style>
- <template>
- <div>
- <h4 > 姓名:{{name}}</h4>
- <h4 > 年龄:{{age}}</h4>
- <p>{{person}}</p>
- <button @click="logPerson('大撩撩', 60)"> 调用方法 </button>
- </div>
- </template>
- <script>
- export default {
- name: "PropsComponent",
- // props: ['name', 'age']
- /*
- props: {
- name: String,
- age: Number,
- person: Object,
- logPerson: Function
- }
- */
- props: {
- name: {type: String, required: true, default: '撩课'},
- age: {type: Number, required: true, default: 20},
- person: Object,
- logPerson: Function
- }
- }
- </script>
- <style scoped>
- </style>
props 父组件可以向子组件传字符串, 对象, 函数
自定义事件: 子组件里面定义一个方法, 父组件里面监听,(监听的函数方法是父组件里面自己定义); 还可以传递参数
- <template>
- <div id="app">
- <CustomEvents @btnClick="deleteP" />
- <p ref="word" class="word"> 我是即将被删除的 </p>
- </div>
- </template>
- <script>
- import CustomEvents from "./components/CustomEvents";
- export default {
- name: "app",
- components: {
- CustomEvents
- },
- methods: {
- deleteP(args) {
- console.log(args);
- this.$refs.Word.remove();
- }
- }
- };
- </script>
- <style>
- .Word {
- width: 300px;
- height: 200px;
- background-color: red;
- color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- </style>
- <template>
- <div>
- <button @click="btnClick"> 删除父组件的 P 标签 </button>
- </div>
- </template>
- <script>
- export default {
- name: "CustomEvents",
- methods: {
- btnClick(){
- // 告诉父组件, 我点击了按钮
- this.$emit('btnClick', {name: '哈哈哈', sex:'男'});
- // TODO
- }
- }
- }
- </script>
- <style scoped>
- </style>
来源: http://www.bubuko.com/infodetail-3138051.html